通过JS控制CSS

作者: 合肥黑 | 来源:发表于2021-03-05 09:13 被阅读0次

参考
简单说通过JS控制CSS的各种方式（上）
简单说通过JS控制CSS的各种方式（下）
说明
通过JS控制CSS，我们能做出更多漂亮的页面特效，做出更炫的交互效果。今天我们来说说JS控制CSS的各种方式。

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

一、在HTML中使用CSS有三种方式

1、内联方式
CSS定义在单个的HTML元素中的style属性中

<!-- 在div 后跟style属性，等号后面写上css样式 -->
<div style="background-color:#000;color:#fff;">  
  <h1>这是一个DIV标签为</h1>
</div>

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

2、内部样式表
CSS通过<style></style>标签定义在HTML页面的<head></head>标签中

<head>
    <meta charset="utf-8">
    <title>js测试</title>
  <!-- 内部样式表开始 -->
    <style >
      .box{
        background-color:#000;
        color:#fff;
      }
    <!-- 内部样式表结束 -->
    </style>
  </head>

  <body>
    <div class="box">
      <h1>这是一个DIV</h1>
    </div>
  </body>

3、外部样式表
将CSS定义在一个外部的CSS文件中，在HTML页面通过<link></link>标签引用CSS文件

<link rel="stylesheet" type="text/css"  href="./css/layout.css" > <!--href中写css样式表存放的路径-->

二、JS控制CSS(注意以下方式会按优先级从高到低排序)

我们用JS控制CSS，我们还是要考虑css优先级的问题，为了能让设置后的css起作用，我们还是选择优先级高的方法比较好。

优先级
关于优化级测试，参考JavaScript中的style和className

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .box{
            background: red;
        }
    </style>
    <script>
        function toRed() {
            var Div = document.getElementById('div1');
            Div.className='box';
        }
 
        function toGreen() {
            var Div = document.getElementById('div1');
            Div.style.background='green';
 
        }
    </script>
</head>
<body>
<input type="button" value="变红"onclick="toRed()">
<input type="button" value="变绿"onclick="toGreen()">
 
 
<div id="div1"></div>
</body>
</html>

变绿了之后，就无法变红。这是因为style.的方式优先级更高。

0、访问style属性

任何支持 style 特性的 HTML 元素在 JavaScript 中都有一个对应的 style 属性。这个 style 对象是 CSSStyleDeclaration 的实例，只包含所有内联样式。

style 对象除了 css 样式属性外，还包含如下属性和方法：

cssText ：可读写，访问/修改内联样式的字符串值，与ele.geAttribute('style')的值相同。
length ：元素的 css 属性的数量，注意，某些 css 样式是多种样式的简写，如 "background" 其实包含 "background-image" 等样式，而此属性获取到的数量是非简写的数量。
getPropertyPriority(propertyName) ：获取 css 属性的优先级字符。即该样式设置了 "!important" 则返回 "important" ；否则返回空字符。
getPropertyValue(propertyName) ：获取 css 属性的值。
removeProperty(propertyName) ：移除指定 css 属性。
setProperty(propertyName, value, priority) ：设置指定 css 属性的值和优先级，priority 为空字符则表示不设置优先级。

可以看以下例子：

// 获取指定元素
let ele = document.getElementById('myDiv');
// 获取元素的 style 属性
let styl = ele.style;
console.log(styl.cssText);    // "background: red; color: green;"
// 修改字体大小为 "18px" , 注意要使用驼峰式
styl.fontSize = '18px';
// 设置 background 样式，并添加"优先级字符"
styl.setProperty('background', 'blue', 'important');
console.log(styl.getPropertyPriority('background'));    // "important"
console.log(styl.getPropertyValue('background'));       // "blue"
// 移除 "color" 样式
styl.removeProperty('color');
console.log(styl.cssText);              // "background: blue !important; font-size: 18px;"
console.log(ele.getAttribute('style')); // "background: blue !important; font-size: 18px;"
console.log(styl.length);               // 11
// 修改 cssText 属性
styl.cssText = ""
console.log(styl.cssText);              // ""

参考https://developer.mozilla.org/zh-CN/docs/Web/API/ElementCSSInlineStyle/style
**HTMLElement.style** 属性返回一个 CSSStyleDeclaration 对象，表示元素的内联style 属性（attribute），但忽略任何样式表应用的属性。通过 style 可以访问的 CSS 属性列表，可以查看 CSS Properties Reference。

由于 style 属性的优先级和通过style设置内联样式是一样的，并且在css层级样式中拥有最高优先级，因此在为特定的元素设置样式时很有用。

注意不能通过直接给style属性设置字符串（如：elt.style = "color: blue;"）来设置style，因为style应被当成是只读的（尽管Firefox(Gecko), Chrome 和 Opera允许修改它），这是因为通过style属性返回的CSSStyleDeclaration对象是只读的。

但是style属性本身的属性能够用来设置样式。此外，通过单独的样式属性（如elt.style.color = '...'）比用`elt.style.cssText = '...' 或者 elt.setAttribute('style', '...')形式更加简便，除非你希望完全通过一个单独语句来设置元素的全部样式，因为通过style本身属性设置的样式不会影响到通过其他方式设置的其他css属性的样式。

// 在单个语句中设置多个样式
elt.style.cssText = "color: blue; border: 1px solid black";
// 或者
elt.setAttribute("style", "color:red; border: 1px solid blue;");

// 设置特定样式，同时保持其他内联样式值不变
elt.style.color = "blue";

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、通过元素的 className 属性控制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>

类似的还有classlist

classList 属性返回元素的类名，作为 DOMTokenList 对象。
该属性用于在元素中添加，移除及切换 CSS 类。
classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.mystyle {
    width: 300px;
    height: 50px;
    background-color: coral;
    color: white;
    font-size: 25px;
}
</style>
</head>
<body>

<p>点击按钮移除 DIV 元素中的 "mystyle" 类.</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 classList 属性。</p>
<div id="myDIV" class="mystyle">
我是一个 DIV 元素。
</div>
<script>
function myFunction() {
    document.getElementById("myDIV").classList.remove("mystyle");
}
</script>

</body>
</html>

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对象（即所有样式表）。它是一个类似数组的对象。

image.png

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

三、封装一下

我们用过的各种类库或者框架中，经常会使用到JS控制CSS的函数，比如JQuery中的css() 方法。
想明白JQuery中的css() 方法的实现原理，看http://www.111cn.net/wy/jquery/97254.htm
今天我们也简单的实现一下这个方法。

//需要两个参数 el,css
//el ：DOM元素
//css ：css规则 字符串类型
function css(el, css) {
   //el如果是DOM元素，就修改元素的css
   if (!!(el && el.nodeType == 1)) {
       //确保第二个参数是字符串类型的css规则
       if (typeof css == 'string' && css.indexOf(':') > 0) {
           //元素有style对象，然后修改style对象的cssText属性
           el.style && (el.style.cssText += ';' + css);
       }

     //el如果不是DOM，就发出警告，结束方法
   } else {
       console.warn('css方法需要一个参数,这个参数必须是DOM元素');
       return;
   }
}

上面写的这个函数，已经实现了我们要的功能了，其中判断是否为DOM元素的那部分还可以继续提出来作为一个单独的方法，其中修改元素css的部分，是通过修改元素的style对象的cssText属性，这种办法修改css的优先级很高，和直接写内联样式一样。

通过JS控制CSS

一、在HTML中使用CSS有三种方式

二、JS控制CSS(注意以下方式会按优先级从高到低排序)

0、访问style属性

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

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

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

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

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

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

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

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

三、封装一下

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

通过JS控制CSS

一、在HTML中使用CSS有三种方式

二、JS控制CSS(注意以下方式会按优先级从高到低排序)

0、访问style属性

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

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

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

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

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

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

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

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

三、封装一下

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

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

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