JS 选色器 colorpicker.js 使用与下载

最新推荐文章于 2024-06-04 15:15:04 发布

卡尔特斯

最新推荐文章于 2024-06-04 15:15:04 发布

阅读量1k

点赞数 6

分类专栏： CSS动画 Html JavaScript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/zz00008888/article/details/136261939

版权

Html 同时被 3 个专栏收录

51 篇文章 7 订阅

订阅专栏

JavaScript

41 篇文章 2 订阅

订阅专栏

CSS动画

6 篇文章 1 订阅

订阅专栏

一、简介

选色器 colorpicker.js 源码，支持取得 hex、rgb 色值。

二、使用方法

下载 https://github.com/dengzemiao/colorpicker.js 。

导入

<script src="./colorpicker.js"></script>

html 中将个一个 div 作为容器 id 设置为 color-picker
```
<div id="color-picker"></div>
```

js 调用插件

Colorpicker.create({
  // 容器标签
  el: "color-picker",
  // 默认颜色
  color: "#000fff",
  // 颜色切换
  change: function (el, hex, rgb) {
    // 修改容器标签颜色，如果需要透明度可以自行调整
    el.style.backgroundColor = hex;
    // el.style.backgroundColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`;
    console.log(elem, hex, rgb);
  },
});

或

new Colorpicker({
  // 容器标签
  el: "color-picker",
  // 默认颜色
  color: "#000fff",
  // 颜色切换
  change: function (el, hex, rgb) {
    // 修改容器标签颜色，如果需要透明度可以自行调整
    el.style.backgroundColor = hex;
    // el.style.backgroundColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`;
    console.log(el, hex, rgb);
  },
});