HTML DOM backgroundColor 属性

clearwater 发表于 2020-3-5 08:23

本帖最后由 clearwater 于 2020-3-5 08:39 编辑

下面的代码出自某前端的视频教程，本节讲的是排他的思想，把所有按钮颜色变成没有颜色，只有点击过的按钮才会变粉红色。

下面代码第21行，为啥视频老师为啥把背景颜色赋值为空　‘　’？

W3SCHOOL的相关语法，并没有空。我觉得虽然结果是达到目的了，但是是不是相对不规范？　是不是改为transparent更好一点？{:1_904:}
Object.style.backgroundColor=color-name|color-rgb
|color-hex|transparent
https://www.w3school.com.cn/jsref/prop_style_backgroundcolor.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

</head>
<body>
<button>button</button>
<button>button</button>
<button>button</button>
<button>button</button>
<button>button</button>
<button>button</button>
<script>
   var btns = document.getElementsByTagName('button');
   for (var i = 0; i < btns.length; i++ ) {
      btns.onclick = function () {
         for (var i = 0; i < btns.length; i++) {
               btns.style.backgroundColor = '';
         }
         this.style.backgroundColor = 'pink';
      }
   }
</script>
</body>
</html>

sensMe 发表于 2020-3-5 08:35

清空背景颜色。。好像我平常用到的时候也这么写

a361690548 发表于 2020-3-5 08:44

第一次是设置为空
第二次是设置为透明
效果明显不一样

china-ray 发表于 2020-3-5 08:46

这个pink老师的视频吧，给个视频连接呗！！！:lol

clearwater 发表于 2020-3-5 08:47

本帖最后由 clearwater 于 2020-3-5 14:44 编辑

china-ray 发表于 2020-3-5 08:46
这个pink老师的视频吧，给个视频连接呗！！！害怕万一里面有广告，我没发现，所以删了。

china-ray 发表于 2020-3-5 08:49

clearwater 发表于 2020-3-5 08:47
链接: https://pan.baidu.com/s/1ZA2OglVfrlNK8d22jpZE-A 提取码: qxtm

感谢、感谢、感谢！

玖公子 发表于 2020-3-5 08:54

空字符串是不是会被认为0，rgb值都为0是白色，纯属猜测哈，剩下的靠大师去验证了{:301_987:}

白色背景色所以看不出白色。

打工仔-知恩 发表于 2020-3-5 09:13

transparent一般使用场景：
如果一个元素覆盖在另外一个元素之上，而你想显示下面的元素，这时你就需要把上面这个元素的background设置为transparent

linguo2625469 发表于 2020-3-5 09:17

本帖最后由 linguo2625469 于 2020-3-5 09:18 编辑

打印
this.style
或者
btns.style
即可知道，元素的style上所有样式默认都是空也就是""当此属性为""相当于这个元素的style上没写这个样式

linguo2625469 发表于 2020-3-5 09:21

其实有时候纯粹的问问题反而不好，自己实践一下想办法证明一下可以印象更深刻，当然了，自己实在没这个思路，适当求助也很正常，其实上课最重要的是学习思路，那些api什么的方法什么的说实话你都可以百度，工作的时候会让你写吐的重要的还是那种解决问题的思维吧，有了这个你干啥都简单

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

HTML DOM backgroundColor 属性