JS 脚本化CSS 之读写dom元素的行内CSS属性

今天也是爱大大的一天吖

于 2020-08-25 17:18:59 发布

阅读量117

点赞数

分类专栏： JS 文章标签： css js

本文链接：https://blog.csdn.net/qq_45560350/article/details/108225212

版权

51 篇文章 1 订阅

订阅专栏

脚本化 == 控制

dom元素的style属性返回一个封装dom元素可用行内CSS属性及开发者为其设置的属性值（不包括默认值）的类数组

<div  style="width: 50px;height: 50px;background-color: orange;"></div>
<script>
  var div = document.getElementsByTagName('div')[0];
</script>

在这里插入图片描述
dom元素在非行内定义的CSS属性不会被显示

div{
  width: 50px;
}
<div  style="height: 50px;background-color: orange;"></div>

并未显示在非行内定义的width属性的属性值
在这里插入图片描述

在这里插入图片描述

读写dom元素的行内样式，没有兼容性问题

在这里插入图片描述
注：

JS中不允许使用background-color这种带中划线的组合单词，要改用小驼峰式backgroundColor写法，用法dom.style.backgroundColor
碰到float这样的保留字属性，前面应加css，写成dom.style.cssFloat
像border这种复合属性，最好差分成borderWidth、borderStyle等
写入的值必须是字符串格式

关注