您的位置：首页 > Web前端 > CSS

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

2017-09-13 11:54 405 查看

说明

通过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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css javascript html 前端 style
相关文章推荐
新的分享
章节导航