jquery颜色选择器是怎么写

JavaScript011

jquery颜色选择器是怎么写,第1张

Jquery实现颜色选择器插件是一款很实用的功能插件,可以灵活设置undefined(不传参数时)、字符串、函数、undefined:把选择的颜

色设置到绑定bigColorpicker的元素的value上。、字符串:把选择的颜色设置到id为"字符串"的元素的value上。、函数:执行传入

的函数以实现自定义的获取颜色后的动作。、engine:可以是undefined、p(或P)、l(或L、在bigColorpicker展现颜色选择

区域小格时有两种实现方式:、

一、是一张背景图片,采用光标定位的方式获取颜色。p(或P)、

二、每个小格就是一个li,设置li的背景颜色。l(或L)、实现方式的不同,效率有所差异,可以自己在使用时选择,默认是p(或P)。、

undefined(不传参数时):使用默认p(或P)、sideLength:设置颜色区域的大小取值范围为2~10,默认为6,只有engine为L

时才生效

html:

<input type="color" name="color" id="color" onchange="changeColor()">

<span id="colorInfo"><span>

   //选择颜色的标签,type="color"

js:

var color = document.getElementById("color")//通过使用 getElementById() 来访问 元素

var colorInfo = document.getElementById("colorInfo")

colorInfo.style.color = color.value//给的字体加颜色

colorInfo.innerHTML = color.value//给加内容(的值)

function changeColor(){ //改变颜色的事件

colorInfo.style.color = color.value

colorInfo.innerHTML = color.value

}

效果图:

使用jquery的伪类选择器,例如

$("选择器 :odd").css("background","#0f0")//奇数行

$("选择器 :even").css("background","#ff0")//偶数行

若是用原生js就要判断,例如

for(var i = 0i <元素行数i++){

if(i%2 == 0){

//奇数行代码

}else{

//偶数行代码

}

}

而且用css也可以添加奇偶数行的样式,例如元素为tr的奇偶设置

tr:nth-child(odd){background:#0f0}

tr:nth-child(even){background:#ff0}

nth-of-type伪类选择器也能实现此效果。