HTML5之input的类型color,通过input:color来改变背景颜色或者字体颜色 |
您所在的位置:网站首页 › input标签背景颜色 › HTML5之input的类型color,通过input:color来改变背景颜色或者字体颜色 |
问题所在:改变了拾色器中颜色的值后并没有在相关元素上体现出来
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; } |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |