通过原生DOM来操作样式

最新推荐文章于 2023-06-29 20:22:56 发布

一碗周.

最新推荐文章于 2023-06-29 20:22:56 发布

阅读量926

点赞数

分类专栏：从头学前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_46163658/article/details/121821192

版权

从头学前端专栏收录该内容

55 篇文章 21 订阅

订阅专栏

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第四十三篇-《样式操作》

概述

到目前为止，我们已经学习的DOM中的三个核心对象，Document、Node、Element，但是我们发现，这说那个核心对象都是操作HTML标签的，页面中的主要有两个静态内容，一个是标签结构是静态的，另个一个是CSS样式是静态的；也就是说DOM中既可以操作HTML标签也可以操作CSS样式。接下来我们就来看一下DOM是怎么对CSS样式进行操作的。

获取内联样式

通过getAttribute()方法

我们之前学习的Element.getAttribute()方法获取指定元素的属性值，如果不存在返回null或者空字符串，如果其中传入style这个属性名，就可以帮助我们获取到其内联样式，示例代码如下：

<body>
  <div id="d1"
       style="width: 200px;height: 200px;border: 1px solid #000;"></div>
  <script>
    var d1 = document.getElementById('d1')
    var style = d1.getAttribute('style')
    console.log(style)  // width: 200px;height: 200px;border: 1px solid #000;
    console.log(typeof style) // string
  </script>
</body>

通过这种方式我们就可以获取到其内联样式，但是其返回值是一个字符串类型，导致其操作会比较麻烦

通过HTMLElement.style属性

由于DOM规范标准中将Document对象定位的HTML页面元素解析为相应的对象，而这些对象都继承于HTMLElement对象。

该对象提供了style属性，此属性返回一个CSSStyleDeclaration对象，表示元素的内联样式属性，但忽略任何样式表应用的属性。

示例代码如下：

<body>
  <div id="d1"
       style="width: 200px;height: 200px;border: 1px solid #000;background: #666;">
  </div>
  <script>
    var d1 = document.getElementById('d1')
    var style = d1.style
    console.log(style)
  </script>
</body>

我们可以通过返回的这个对象，获取我们想要的具体内容，例如：

console.log(style.border) // 1px solid rgb(0, 0, 0)

CSSStyleDeclaration对象

通过HTMLElement.style属性返回的CSSStyleDeclaration对象，它是一个CSS声明块，表示CSS属性键值对的集合。用次对象操作CSS的样式属性是比较方便的。

下表中是CSSStyleDeclaration对象中一些比较常用的属性和方法

属性/方法	描述
`cssText`	获取声明块中的内容
`length`	返回属性的数量(不一定与设置的个数一致)
`item(index)`	返回属性名。`index`是需要查找节点的索引，索引下标从零开始。
`getPropertyValue(property)`	返回属性值。`property`是需要查询的CSS 属性名称。

示例代码如下

<body>
  <div id="d1"
       style="width: 200px;height: 200px;border: 1px solid #000;background: #666;">
  </div>
  <script>
    var d1 = document.getElementById('d1')
    var style = d1.style
    // 获取CSS声明块的内容
    console.log(style.cssText)  // width: 200px; height: 200px; border: 1px solid rgb(0, 0, 0); background: rgb(102, 102, 102);
    // 获取属性长度(不一定与设置的个数一致)
    console.log(style.length)   // 29
    // 获取索引值为 20 的属性名
    console.log(style.item(20)) // background-position-x
    // 获取 background 的属性值
    console.log(style.getPropertyValue('background')) // rgb(102, 102, 102)
  </script>
</body>

值得注意的是，CSSStyleDeclaration.cssText属性返回的是文本内容，解析操作时会比较麻烦

当然了，也可以使用使用CSSStyleDeclaration.CSS属性名的方式直接获取到其属性值，示例代码如下：

console.log(style.background) // rgb(102, 102, 102)

设置内联样式

我们之前已经学习了怎么获取内联样式属性的两种方式，一个是通过Element对象getAttribute()方法，另一个是通过HTMLElement对象的style属性。如果想要设置内联样式对应的也是两种，一个Element对象setAttribute()方法，而另一个依旧是通过HTMLElement对象的style属性。

示例代码如下

<body>
  <div id="d1"
       style="width: 200px;height: 200px;border: 1px solid #000;background: #666;">
  </div>
  <script>
    var d1 = document.getElementById('d1')
    // 方法1.利用属性操作的方式
    // 修改宽度
    d1.setAttribute('style', 'width: 300px;height: 100px;border: 1px solid #000;background: #666;')

    // 方法2.利用HTMLElement对象的style属性
    var style = d1.style
    // 修改背景
    style.background = '#ddd'
  </script>
</body>

class属性的操作

在我们编写HTML页面的时候时，对页面的样式操作，主要是通过class选择器的，我们可以通过这种特质，来达到修改样式的操作。

Element对象提供的className属性，可以获取或设置指定元素的class属性的值。Element对象提供的getAttribute()和setAttribute()方法也可以获取或设置指定元素的class属性的值。

我们可以修改其值，来完成修改样式的操作，示例代码如下所示：

CSS 替换前后样式代码

/*替换前*/
.cls {
  height: 200px;
  width: 200px;
  background-color: lightgreen;
}
/*替换后*/
.one {
  height: 50px;
  width: 300px;
  background-color: lightsalmon;
}

HTML代码如下

<body>
  <div id="d1" class="cls"></div>
  <script>
    var div = document.getElementById('d1')
    // 通过 Element 对象的 className 属性获取和设置
    var clsName = div.className
    console.log(clsName)  // cls
    div.className = 'one'

    // 通过 Element 对象的 getAttribute() 和 setAttribute() 进行获取和设置
    var className = div.getAttribute('class')
    console.log(clsName)  // cls
    div.setAttribute('class', 'one')
  </script>
</body>

使用这两种都可以进行样式切换，这种的主要区别是Element.className属性仅是对class的值进行操作的，而Element对象的getAttribute()和setAttribute()方法是可以对任意属性和值进行操作的。

Element对象提供的classList属性，该属性返回一个元素的类属性的实时集合。示例代码如下

<body>
  <div id="d1" class="cls two"></div>
  <script>
    var div = document.getElementById('d1')
    // 通过 Element 对象的 classList 属性
    var classList = div.classList
    console.log(classList)
  </script>
</body>

现在我们可以通过DOMTokenList.value的方式进行页面样式的操作，示例代码如下

classList.value = 'one'

获取当前有效的样式

一个HTML页面的呈现，往往是通过多个CSS样式规则设置的，其中避免不了有许多的覆盖，但是这么多的样式规则中，我们怎么知道那些是有效的，那些是无效的呢，现在我们就来学习一下如何有效的获取当前有效的样式。

Window.getComputedStyle()方法

Window.getComputedStyle()方法返回一个CSSStyleDeclaration对象，该对象包含指定元素的当前有效样式。

语法结构如下所示：

var style = window.getComputedStyle(element, [pseudoElt]);

参数说明

element：用于获取计算样式的Element。
pseudoElt(可选)：指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。

返回值：一个实时的CSSStyleDeclaration对象，当元素的样式更改时，它会自动更新本身。

示例代码如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>获取有效属性</title>
  <style>
    .cls {
      height: 200px;
      background-color: rgb(255, 255, 0);
    }
  </style>
</head>

<body>
  <div style="width: 200px; background-color: rgb(255, 0, 255);"
       class="cls"
       id="d1"></div>
  <script>
    var div = document.getElementById('d1')
    var style = window.getComputedStyle(div)
    // 获取有效的 background-color 的值
    console.log(style.backgroundColor) // rgb(255, 0, 255)
  </script>
</body>

</html>

由于内联的尤其级别要高于内嵌的优先级别，所以返回的是内联的background-color的值。

Window.getComputedStyle()方法是存在兼容性问题的，主要是指IE 8及以下版本的浏览器之中。

Element.currentStyle属性

由于Window.getComputedStyle()方法是存在兼容性问题，Element对象提供的currentStyle属性主要是应用于IE 8及以下版本的浏览器之中,功能与Window.getComputedStyle()方法相同。

示例代码如下

var div = document.getElementById('d1')
function getStyle(element) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(element)
  } else {
    return element.currentStyle
  }
}
var style = getStyle(div)
// 获取有效的 background-color 的值
console.log(style.backgroundColor) // rgb(255, 0, 255)

写在最后

你如果看到这里，我感到很荣幸，如果你喜欢这篇文章，你可以为这篇文章点上一个小赞；你如果喜欢这个专栏，我会一直更新到百篇以上，可以点一下后面的链接从头学前端 - 一碗周的专栏进入之后给个关注。

最后也可以给我点个关注，万分荣庆。

往期推荐

一碗周.

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
通过原生DOM来操作样式

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~这是【从头学前端】系列文章的第四十三篇-《样式操作》概述到目前为止，我们已经学习的DOM中的三个核心对象，Document、Node、Element，但是我们发现，这说那个核心对象都是操作HTML标签的，页面中的主要有两个静态内容，一个是标签结构是静态的，另个一个是CSS样式是静态的；也就是说DOM中既可以操作HTML标签也可以操作CSS样式。接下来我们就来看一下DOM是怎么对CSS样式进行操作的。.
复制链接

扫一扫