单击时更改跨度的颜色
单击时更改跨度的颜色
提问于 2017-12-06 06:21:56
https://codepen.io/SmileySteven/pen/pdBYdv?editors=1111
function test(){
var span = document.querySelectorAll('span');
for(var i = 0 ; i <= span.length ;i++){
span.addEventListener('click', function(){
this.style.backgroundColor === '#ffffff'? this.style.backgroundColor = 'yellow'
: this.style.backgroundColor="#000000";
})
}
}
test();大家好，我正在尝试改变我的跨度的背景颜色点击，但它似乎没有工作-关心引导我做错了什么？我已将所有跨度设置为#ffffff的背景色
回答 4
Stack Overflow用户
发布于 2017-12-06 06:24:29
span.addEventListener('click', function(){您正在将事件设置为跨度的整个集合。您应该设置为单个元素
span[i].addEventListener('click', function(){Stack Overflow用户
发布于 2017-12-06 06:41:24
function test(){
var span = document.querySelectorAll('span');
span.forEach((item)=>{
item.addEventListener('click',()=>{
let styles = getComputedStyle(item);
styles.backgroundColor == 'rgb(255, 255, 255)' ? item.style.backgroundColor = 'yellow' : item.style.backgroundColor = 'black';
});
});
}
test();.def.def2{
background-color:orange
}
div#ya{
background-color:purple
}
span{
background-color:#ffffff
}<input type="text" id="i1"> </input>
<input type="text" id="i2"> </input>
<input type="number" id="i3"> </input>
<button id="btn"> sad </button>
<div> Div1 </div>
<div class="def def2"> div2 </div>
<div id="ya" class="def def2 def3 omg"> div2 </div>
<p> sad </p>
<span > test </span><span> test </span><span> test </span>
我推荐在querySelectorAll()中使用forEach。
而且，如果你想得到background-color的值，你最好使用getComputedStyle()。
但是，getComputedStyle().backgroundColor总是返回rgb()，所以你必须使用rgb()。
Stack Overflow用户
发布于 2017-12-06 07:41:58
1 - JavaScript always garbing 白色backgrounds From HTML as 空用于打印。
所以如果你想要匹配的背景是白色的
然后用替换：
this.style.backgroundColor === '#ffffff' ? ..... etc ;
有了这个：
this.style.backgroundColor === "" ? this.style.backgroundColor = 'yellow'
: this.style.backgroundColor="#000000";否则，如果您尝试匹配的背景是白色而不是
然后，您可以使用条件normal element === " color code here "
2 -最后，正如其他人提到的那样，在您的span回调前面添加循环，如下所示：
span[i].addEventListener('click', function(){ ... etc页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47668027
复制![[踩坑]iconfont Symbol svg引入无法更改颜色](https://ask.qcloudimg.com/http-save/8227338/8085d6cd0702f73780b43af4ab986037.webp)
相似问题
更改悬停时跨度的颜色
跨度/按钮悬停时边框颜色更改
单击时更改颜色
单击时更改按钮颜色(多次单击/颜色)
用CSS在悬停时更改跨度的颜色
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
