文章/答案/技术大牛

发布

社区首页 >专栏 >简单说通过JS控制CSS的各种方式（上）

简单说通过JS控制CSS的各种方式（上）

FEWY

发布于 2019-05-26 03:59:02

4.9K10

代码可运行

文章被收录于专栏：FEWYFEWY

运行总次数：0

代码可运行

说明

通过JS控制CSS，我们能做出更多漂亮的页面特效，做出更炫的交互效果。今天我们来说说JS控制CSS的各种方式。

解释

JavaScript、CSS、HTML是前端三剑客，我们说正事之前，先来说说CSS与HTML的事。

在HTML中使用CSS有三种方式 1、内联方式 CSS定义在单个的HTML元素中的style属性中 2、内部样式表 CSS通过<style></style>标签定义在HTML页面的<head></head>标签中 3、外部样式表 将CSS定义在一个外部的CSS文件中，在HTML页面通过<link></link>标签引用CSS文件

而JavaScript 中的DOM操作，又可以控制HTML页面中的元素。

说到这，我们最少已经知道，三种方式，通过JS控制CSS了。好了，我们开始说正事了。

1、通过“ . ”直接设置元素的style属性

语法： element.style.attributename= attributevalue; 例如：

document.body.style.width = '100px';

注意：这里的style属性的值是一个对象。这个对象所包含的属性与CSS规则一一对应，但是名字需要用驼峰命名的方式进行改变，比如background-color写成backgroundColor。改写的规则是将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写。如果CSS属性名是JavaScript保留字，则规则名之前需要加上字符串css，比如float写成cssFloat。

document.body.style.backgroundColor= 'red';

温馨提示： 如果你不愿意换成驼峰命名法的话，也有办法，用“[ ]”代替 “.” , “[ ]” 中直接写字符串类型的CSS属性。 例如：

document.body.style['background-color']= 'red';

如果你好奇为什么可以这样做，请看这里简单说 background-color 与 backgroundColor的区别

2、通过 setAttribute 方法设置元素的style属性

setAttribute 方法添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值。

语法：

element.setAttribute(attributename,attributevalue)

例如：

var a = document.body;
a.setAttribute("style","background-color:red;height:100px;");

这个方法很好用，第一个参数写“style”，第二个参数就是CSS，把需要的CSS直接粘贴进去就可以了。

注意： 两个参数都是字符串类型的哦！

3、通过style对象的 setProperty 方法设置CSS属性

setProperty 方法直接设置某个CSS属性

语法：

element.style.setProperty (propertyName, propertyValue, priority);

setProperty 方法的第三个参数（priority），字符串类型，指定样式属性的优先级。样式属性的优先级可以通过getPropertyPriority方法获取。如果要设置!important，建议设置第三个参数，但是传参的时候不用写前面的 “!” 。 例如：

var a = document.body;
a.style.setProperty ("background-color", "green", 'important');

注意： setProperty 方法与 setAttribute 方法是不一样的，setProperty 方法是元素style属性的一个方法，setAttribute 方法是元素的一个方法，虽然他们都能控制CSS，但还是有区别的。

更多关于setProperty 方法的知识请看 http://help.dottoro.com/ljdpsdnb.php

4、通过style对象的cssText属性，控制CSS

style对象的 cssText属性设置或返回样式声明的内容作为字符串。

语法：

element.style.cssText = string

例如：

document.body.style.cssText = "background-color:red";

注意： 直接用 “=” 会覆盖原来的值，需要追加新的值就用 “+=”

5、通过元素的 class 属性控制CSS

我们可以通过先定义好class，然后改变元素的class属性，来控制CSS

元素的 className 属性设置或返回元素的 class 属性值。

语法：

element.className = 'className';

例如：

<!doctype html>
<html lang="zh">
 <head>
     <meta charset="utf-8">
     <style>
        .redBorder{
            border:1px solid red;
        }
        .greenBg{
            background-color:green;
        }
     </style>
 </head>

 <body class="redBorder">
 </body>

 <script>
    var a = document.body;
    a.className = 'greenBg';
    //元素的redBorder class会被替换 为 greenBg
    //如果两个class 都需要,可以把+ 变成 += ,值的最前面加上一个空格，像下面这样
    //a.className += ' greenBg';
 </script>
</html>

温馨提示： 是className 不是class，class在JavaScript中是保留字所以不能用，要用 className 哦！

6、通过创建 `<style><style>` 标签，引入新的样式

我们可以先在元素上定义好class属性，然后通过JS创建<style></style>，给元素加上样式

例如：

<!doctype html>
<html lang="zh">
 <head>
     <meta charset="utf-8">
 </head>

 <body class="redBg">
 </body>

 <script>
    var head = document.head;
    // 创建 style 元素
    var styleElement = document.createElement('style');

    //在创建好的style元素中，写上CSS
    styleElement.innerHTML = '.redBg{background-color:red;}';
    //在head 中加上 style 元素
    head.append(styleElement);
 </script>
</html>

7、通过创建 `<link><link>` 标签，引入新的样式

我们可以先在外部创建一个CSS文件，然后通过JS创建<link><link> 标签，在页面里引入新的样式，这个方法和上面的创建 <style><style> 标签的方法很类似。 外部CSS文件（style.css）：

.redBg{
    background-color:red;
}

HTML页面：

<!doctype html>
<html lang="zh">
 <head>
     <meta charset="utf-8">
 </head>

 <body class="redBg">
 </body>

 <script>
    // 创建 link 元素
    var linkElement = document.createElement('link');

    //设置 linkElement 的src 为外部CSS文件的路径
     linkElement.href = './style.css';

    //在head 中加上 linkElement 元素
    document.head.append(linkElement);
 </script>
</html>

8、通过 insertRule 或者 addRule 插入新的样式

StyleSheet对象代表网页的一张样式表，它包括<link>节点加载的样式表和<style>节点内嵌的样式表。 document对象的styleSheets属性，可以返回当前页面的所有StyleSheet对象（即所有样式表）。它是一个类似数组的对象。

insertRule方法用于在当前样式表的cssRules对象插入CSS规则 语法：

stylesheet.insertRule(rule, index)

insertRule 方法的第一个参数是表示CSS规则的字符串，第二个参数是该规则在cssRules对象的插入位置。

例如：

var styleTag = document.createElement ("style");
var head = document.getElementsByTagName ("head")[0];
head.appendChild (styleTag);

styleTag.sheet.insertRule ("body {background:red;}", 0);

更多关于insertRule 方法的知识请看 https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule

addRule方法 语法：

object.addRule (selector, styleDef [, positionIndex]);

参数说明： selector ：必须，指定新规则对象的选择器的字符串。 styleDef ：必须，指定新规则对象的样式定义的字符串。 positionIndex ：可选，整数，指定规则集合中新规则的位置。

var styleTag = document.createElement ("style");
var head = document.getElementsByTagName ("head")[0];
head.appendChild (styleTag);

styleTag.sheet.addRule ("body", "background:red", 0);

更多关于addRule 方法的知识请看 http://help.dottoro.com/ljuucnct.php

温馨提示： 方式8，插入的新的样式，在页面中看不见，如果需要看见的话，可以通过样式表的cssRules属性。 例如：

styleTag.sheet.cssRules

总结

说了这么多方法，要注意各种方式控制CSS后，样式的优先级问题

方法	优先级
通过“ . ”直接设置元素的style属性	内联样式
通过 setAttribute 方法设置元素的style属性	内联样式
通过style对象的 setProperty 方法设置CSS属性	内联样式
通过style对象的 cssText属性，控制CSS	内联样式
通过元素的 class 属性控制CSS	内部样式
通过创建 <style><style> 标签，引入新的样式	内部样式
通过创建 <link><link> 标签，引入新的样式	外部样式
通过 insertRule 或者 addRule 插入新的样式	内部样式或外部样式