面试中，应该会经常被问到样式的写法以及如何使用原生JS获取及操作样式的问题吧，让我给大家总结一下~
HTML中样式的写法不外乎以下四种方式
- 行内样式
<div style="color: blue; background-color: yellow !important;">假装有内容</div>
- head内部样式
<head>
<style>
div {
width: 100px;
line-height: 100px;
background-color: red;
border: 6px solid #ccc;
text-align: center;
}
</style>
</head>
- 外链样式
<link rel="stylesheet" href="./index.css">
- 导入样式
@import url('xxx.css');
那么通过原生JS如何获取到这些样式，又如何设置呢？
getStyle-methods.PNG
一、原生JS操作行内样式
HTML + 行内样式
<div style="color: blue; background-color: yellow !important;">假装有内容</div>
JS
var divEle = document.querySelector('div');
1. 获取行内样式信息
var divStyle = divEle.style;
console.log(divStyle);
style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息
但不包含与外部样式，或嵌入式样式层叠而来的样式
styleDec.PNG
短划线的css属性必须转换成驼峰大小写形式 (float是关键字，所以规定为cssFloat)
cssFloat.PNG
1.1 应用给元素的css属性的数量
console.log(divStyle.length); // 2
1.2 返回给定位置的 CSS 属性的名称 与length配套使用
console.log(divStyle.item(0)); // color
1.3 cssText: 通过它能够访问到 style 特性中的 CSS 代码
在读取模式下， cssText 返回浏览器对 style特性中 CSS 代码的内部表示
console.log(divStyle.cssText); // color: blue; background-color: yellow !important;
1.4 获取指定属性的值
console.log(divStyle.getPropertyValue('color')); // blue
1.5如果给定的属性使用了 !important 设置，则返回 "important" ；否则，返回空字符串
console.log(divStyle.getPropertyPriority('background-color')); // important
2. 设置行内样式
2.1 通过element.style设置
divStyle.color = '#FFF';
divStyle.backgroundColor = '#000';
element.style.PNG
2.2 setProperty(属性, 属性值, 权重)第三个参数(可选): 优先权重 "important" 或者一个空字符串
divStyle.setProperty('color', 'green');
setProperty.PNG
2.3 cssText方式
在写入模式下，赋给 cssText 的值会重写整个 style 特性的值
设置 cssText 是为元素应用多项变化最快捷的方式，因为可以一次性地应用所有变化
divStyle.cssText = 'background-color: #FFF; color: orange;';
set-cssText.PNG
3.删除属性
removeProperty(propertyName) ：从样式中删除给定属性
意味着将会为该属性应用默认的样式（从其他样式表经层叠而来）
console.log(divStyle.removeProperty('color')); // 返回给定属性的值 orange
remove-color.PNG
嘿嘿~
timg1.jpg
下一篇： 原生JS获取样式-2.计算属性getComputedStyle
下下一篇： 原生JS获取及设置样式-3.操作样式表
网友评论