js原生调色器

1. js纯原生颜色选择器的实现

(1)html部分：

<div id="hezi"> <span class="red"><div class="r"></div></span> <span class="green"><div class="g"></div></span> <span class="blue"><div class="b"></div></span> <div class="d2"></div>

</div>

(2)css部分

<style type="text/css"> *{ padding: 0; margin: 0; } #hezi{ width: 350px; } span{ width: 265px; height: 12px; border: 1px solid #ccc; border-radius: 5px; display: inline-block; margin-top: 12px; position: relative; } .d2{ width: 65px; height: 65px; border: 1px solid #ccc; margin-top: -44px; float: right; } .r{ width: 10px; height: 20px; border-radius: 2px; margin-top:-5px; position: absolute; background: red; } .g{ width: 10px; height: 20px; border: 1px solid #b7ed83; border-radius: 2px; margin-top:-5px; position: absolute; background: green; } .b{ width: 10px; height: 20px; border: 1px solid #96b6d9; border-radius: 2px; margin-top:-5px; position: absolute; background: blue; }

</style>

 

(3)js部分

<script type="text/javascript"> var red_span = document.querySelector('.red'); var red = document.querySelector('.r'); var d2 = document.querySelector('.d2');         var r = 0;   var g = 0; var b = 0;  

d2.style.background = 'rgb('+ r +','+ g +','&