玩转原生JS：如何获取和设置CSS样式——行内样式篇

最编程 2024-08-10 12:11:26

...

面试中，应该会经常被问到样式的写法以及如何使用原生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>

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，掌控CSS样式的新姿势

下一篇：使用JavaScript修改CSS样式的方法：style.cssText

玩转原生JS：如何获取和设置CSS样式——行内样式篇

HTML中样式的写法不外乎以下四种方式

一、原生JS操作行内样式

1. 获取行内样式信息

2. 设置行内样式

3.删除属性

玩转原生JS：如何获取和设置CSS样式——行内样式篇

玩转原生JS：如何添加和修改CSS样式——第三部分：操作样式表

升级你的CSS技能：原生JS的getComputedStyle和设置样式的方法详解