HTML5之input的类型color，通过input：color来改变背景颜色或者字体颜色

2024-06-16 05:49| 来源: 网络整理| 查看: 265

问题所在：改变了拾色器中颜色的值后并没有在相关元素上体现出来

CSS Variables .artical{ color:#ffc600; } 当前值：选择文本字体颜色：

背景颜色展示

// var Color=document.querySelector("#color"); // Color.addEventListener("change",colorchange,false); function change(){ var Range=document.querySelector("#range"); var Num=document.querySelector(".num"); Num.value=Range.value; } function colorchange(){ //alert("fff");在选择完颜色之后，点击了确认按钮后才出发change事件。 var Color=document.querySelector("#color"); var Artical=document.querySelector(".artical"); Color.click(); //出现问题处 Artical.style.color=Color.value; }

问题描述：在拾色器中更改颜色后，文本字体颜色不随着改变

原因：input,color中不能主动触发click事件，据说是安全方面的考虑

问题解决：加上

Color.click() // 必须添加触发click事件否则不能通过点击确定按钮触发更改颜色

模拟用户操作，来达到单击的效果

注意点：

change事件的触发时刻：在拾色器更换完颜色后，点击确定按钮后才触发change事件，进入处理函数。

另外一种解决方法：

采用CSS原生变量，当拾色器改变时，直接修改--color值即可。

CSS Variables :root{ --color:#ffc600; } .artical{ color:var(--color); } 当前值：选择文本字体颜色：

背景颜色展示

// var Color=document.querySelector("#color"); // Color.addEventListener("change",colorchange,false); function change(){ var Range=document.querySelector("#range"); var Num=document.querySelector(".num"); Num.value=Range.value; } function colorchange(){ //alert("fff");在选择完颜色之后，点击了确认按钮后才出发change事件。 var Color=document.querySelector("#color"); document.body.style.setProperty("--color",Color.value); //var Artical=document.querySelector(".artical"); // Color.click(); //出现问题处 //Artical.style.color=Color.value; }

【本文地址】

公司简介

联系我们