DOM启蒙：元素节点内联样式

最新推荐文章于 2022-03-18 16:44:24 发布

yyanliqi

最新推荐文章于 2022-03-18 16:44:24 发布

阅读量366

点赞数

分类专栏： DOM启蒙前端 DOM启蒙文章标签： DOM DOM启蒙读书笔记

本文链接：https://blog.csdn.net/rachel9798/article/details/83447657

版权

前端同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

DOM启蒙

8 篇文章 0 订阅

订阅专栏

DOM启蒙

8 篇文章 0 订阅

订阅专栏

1.样式属性概览

每个HTML元素都有个style属性，可以用来插入针对该元素的内联CSS属性。

注意：style属性返回一个CSSStyleDeclaration对象，而不是一个字符串。该CSSStyleDeclaration都仅包含该元素的内联样式。

2.获取、设置及移除单个内联CSS属性

1. 内联CSS样式都各自表示为元素节点style对象的一个个属性，即可获得、设置或移除某个元素上单个CSS属性的接口。

style对象中的属性名使用驼峰结构。如果CSS属性名是个JavaScript关键字，则JavaScript CSS属性名会被加css前缀。

对于任何需要度量单位的CSS属性，记得包含合适的单位。

2.style对象提供了以下方法来操作某个元素节点上的单个CSS属性

getPropertyValue（"propertyName"）；
setPropertyValue（"propertyName","value"）；
removeProperty（"propertyName"）；

注意：传给以上方法的属性名称是有横线的CSS属性名称

3.获取、设置及移除所有内联CSS属性

cssText
getAttribute（"style"）、setAttribute（"style"，"value"），removeAttribute（"style"）

4.使用getComputedStyle（）获取元素的已计算样式

getComputedStyle（）：

可获得元素级联包括内联样式后的CSS。

该方法提供一个只读的类似style的CSSStyleDeclaration对象。

遵照CSS声明优先级。

返回的颜色值格式为rgb（#，#，#）。

5.使用class及id属性应用或者移除元素上的CSS属性

操作元素样式最普遍的模式：

定义在内联样式表单或者外部样式表单的样式规则可以通过操作元素上的class或id属性添加或移除

<!DOCTYPE html>
<html lang="en">
<head>
<style>
 .foo{
    background-color:red;
    padding:10px;
  }
 #bar{
  border:10px solid #000;
  margin:10px;
 }
</style>
</head>
<body>
   <div></div>
   <script>
     var div=document.querySelector("div");
     div.setAttribute("id","bar");
     div.classList.add("foo");
   </script>
</body>
</html>