HTML5使用rgb颜色值来改变区块颜色

最新推荐文章于 2024-07-21 09:00:00 发布

菜鸟下山

最新推荐文章于 2024-07-21 09:00:00 发布

阅读量3.5k

点赞数

文章标签： css rgb颜色

本文链接：https://blog.csdn.net/huzijia888/article/details/78565344

版权

<!doctype html>
<html>
<head>
<style>
#qu{
width:360px;
}
#test2{
position:absolute;
top:34px;
left:230px;
width:150px;
height:150px;
border:1px solid;
background-color:black;
}
</style>
<script>
function ch(){
var R=document.getElementById("r").value;
var G=document.getElementById("g").value;
var B=document.getElementById("b").value;
var pp="rgb("+R+","+G+","+B+")";//使用rgb赋值的方式来改变背景颜色
var s1=document.getElementById("test1");
var s2=document.getElementById("test2");
s1.innerHTML=pp;
s2.style.backgroundColor=pp;
}
</script>
<meta charset="UTF-8">
</head>
<body>
<fieldset id="qu">
<legend>请选择颜色值</legend>
<p>R:0<input type="range" min="0" max="255" id="r" value="0" οnchange="ch()">100</p>

<p>G:0<input type="range" min="0" max="255" id="g" value="0" οnchange="ch()">100</p>
<p>B:0<input type="range" min="0" max="255" id="b" value="0" οnchange="ch()">100</p>
<span id="test1" >rgb(0,0,0)</span>
<div id="test2" ></div>
</fieldset>
</body>
</html>