2 fe dev FE_dev 于 2017.09.08 18:10 提问

通过js 控制 css的方法疑问

通过js获取到一个元素后,修改元素的style 可以修改样式,
但是要把 css 属性改为驼峰命名
比如 obj.style.backgroundColor

但是为什么 obj.style['background-color']也能起作用
在obj.style 中并没有 看见 像background-color 这样的属性呀

5个回答

caozhy
caozhy   Ds   Rxr 2017.09.08 21:05

css对大小写不敏感,所以大写小写是一样的。

q213546879
q213546879   2017.09.08 21:29

其实当我们这样去写的时候js并不是直接查找obj下面的这个对象然后去给它加样式的,js是先在obj下面创建这个对象然后再去用css渲染的
可以发现当我们如果这样写的时候

 <div id="miaov"></div>
<script>
    miaov.style.abc = '#f00';
    miaov.style['abcd'] = '#f00';
    console.log(miaov.style);
</script>

我们能得到这样的结果

q213546879
q213546879 回复FE_dev: 具体处理的方法就看你用在什么地方了,比如用在js里面style属性后面的时候一般是采用去掉中划线,然后中划线后面的首字母大写就可以的
2 个月之前 回复
FE_dev
FE_dev 在css渲染的时候,- 是怎么处理的,比如 background-color, BACKGROUND-COLOR , 可以起作用,但是BACKGROUNDCOLOR , backgroundSize 都是不起作用的
2 个月之前 回复
sunny_desmond
sunny_desmond   2017.09.09 10:20

如上所述,css对大小写不敏感

winter_a
winter_a   2017.09.09 10:39

只要基本语法对的就行,大小写没关系的

FE_dev
FE_dev   2017.09.09 17:35

图片说明

比较好奇的是 元素的 style 中 没有像 background-color 这样的属性,但是为什么 obj.style['background-color']也能起作用

Csdn user default icon
上传中...
上传图片
插入图片