大家好,我是一碗周,一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐,万分有幸~
这是【从头学前端】系列文章的第四十三篇-《样式操作》
概述
到目前为止,我们已经学习的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)
写在最后
你如果看到这里,我感到很荣幸,如果你喜欢这篇文章,你可以为这篇文章点上一个小赞;你如果喜欢这个专栏,我会一直更新到百篇以上,可以点一下后面的链接从头学前端 - 一碗周的专栏进入之后给个关注。
最后也可以给我点个关注,万分荣庆。
往期推荐