简单说 通过JS控制CSS的各种方式(上)

版权声明:本文为博主原创文章,欢迎转载,转载请注明出处。 https://blog.csdn.net/FE_dev/article/details/77888446

说明

通过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 插入新的样式

内部样式 或 外部样式

这次我们就先说到这,下次我们说说如何把他们封装起来,方便我们以后使用。

本文参考 http://www.cnblogs.com/LiuWeiLong/p/6058059.html http://javascript.ruanyifeng.com/dom/css.html#toc10 http://www.cnblogs.com/susufufu/p/5749922.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券