<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>发送</title>
<style type="text/css">
table{
border-collapse:collapse
}
table td {
border: 1px solid #000000
padding: 2px 5px
}
input.warning{
border-color: red
}
</style>
<script type="text/javascript">
String.prototype.padLeft = function (len, charStr) {
return new Array(len - this.length + 1).join(charStr, '') + this
}
function changeBgColor(input){
var rgbInput = document.getElementById("rgb")
var redInput = document.getElementById("red")
var greenInput = document.getElementById("green")
var blueInput = document.getElementById("blue")
var redValue = Number(redInput.value)
var greenValue = Number(greenInput.value)
var blueValue = Number(blueInput.value)
if(redValue < 0 || redValue > 255 || isNaN(redValue))
{
alert("red value invalid")
redInput.className = "warning"
return
}
redInput.className = ""
if(greenValue < 0 || greenValue > 255 || isNaN(greenValue))
{
alert("green value invalid")
greenInput.className = "warning"
return
}
greenInput.className = ""
if(blueValue < 0 || blueValue > 255 || isNaN(blueValue))
{
alert("blue value invalid")
blueInput.className = "warning"
return
}
blueInput.className = ""
document.body.style.backgroundColor = "#" + redValue.toString(16).padLeft(2, '0') + greenValue.toString(16).padLeft(2, '0') + blueValue.toString(16).padLeft(2, '0')
}
</script>
</head>
<body>
<table>
<tr><td>red:</td><td><input type="text" id="red" name="red" onchange="changeBgColor(this)" placeholder="please input 0-255"/></td></tr>
<tr><td>green:</td><td><input type="text" id="green" name="green" onchange="changeBgColor(this)" placeholder="please input 0-255"/></td></tr>
<tr><td>blue:</td><td><input type="text" id="blue" name="blue" onchange="changeBgColor(this)" placeholder="please input 0-255"/></td></tr>
</table>
</body>
</html>
需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。
2、在index.html中的<script>标签，输入js代码：$('div').click(function () {$(this).css('color', 'blue')})。
3、浏览器运行index.html页面，此时点击123所在的div，div会变为蓝色文本。
主要原理是利用 css 变量设置颜色，用 js 动态修改变量，使颜色变化，兼容性如下；
实现换肤之前先要了解一下伪类选择器 :root ，还有css的 var() 函数和 setProperty() 函数
:root 是一个伪类，表示文档根元素，非 IE 及 IE8 及以上浏览器都支持，在 :root 中声明相当于全局属性，只要当前页面引用了 :root 所在的文件，都可以使用css var() 函数来引用；
语法
var() 函数，可以代替元素中，任何属性中的值的任何部分； var() 函数不能作为属性名、选择器或者其他除了属性值之外的值，这样做通常会产生无效的语法或者一个没有关联到变量的值；
语法
setProperty() 方法用于设置一个新的 css 属性，同时也可以修改 css 声明块中已存在的属性，兼容性如下；
语法
如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；END
往期文章
个人主页
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）