JS设置CSS样式的方式汇总

时间：2017-02-27 编辑：简简单单来源：一聚教程网

1. 直接设置style的属性某些情况用这个设置 !important值无效

如果属性有'-‘号，就写成驼峰的形式（如textAlign）如果想保留 - 号，就中括号的形式 element.style[‘text-align'] = ‘100px';

代码如下	复制代码
element.style.height ='100px';

2. 直接设置属性（只能用于某些属性，相关样式会自动识别）

代码如下

复制代码

element.setAttribute('height', 100);

element.setAttribute('height','100px');

3. 设置style的属性

代码如下	复制代码
element.setAttribute('style','height: 100px !important');

!important的css定义是拥有最高的优先级。

4. 使用setProperty 如果要设置!important，推荐用这种方法设置第三个参数

代码如下	复制代码
element.style.setProperty('height','300px','important');

5. 改变class 比如JQ的更改class相关方法

代码如下

复制代码

element.className ='blue';

element.className +='blue fb';

6. 设置cssText

代码如下

复制代码

element.style.cssText ='height: 100px !important';

element.style.cssText +='height: 100px !important';

7. 创建引入新的css样式文件

代码如下

复制代码

functionaddNewStyle(newStyle) {

varstyleElement = document.getElementById('styles_js');

if(!styleElement) {

styleElement = document.createElement('style');

styleElement.type ='text/css';

styleElement.id ='styles_js';

document.getElementsByTagName('head')[0].appendChild(styleElement);

}

styleElement.appendChild(document.createTextNode(newStyle));

}

addNewStyle('.box {height: 100px !important;}');

8. 使用addRule、insertRule

代码如下

复制代码

// 在原有样式操作

document.styleSheets[0].addRule('.box','height: 100px');

document.styleSheets[0].insertRule('.box {height: 100px}', 0);

// 或者插入新样式时操作

varstyleEl = document.createElement('style'),

styleSheet = styleEl.sheet;

styleSheet.addRule('.box','height: 100px');

styleSheet.insertRule('.box {height: 100px}', 0);

document.head.appendChild(styleEl);

上一个： javascript怎么学？如何学习 JavaScript？
下一个：新闻上下滚动jquery，超简洁

推荐专题

最新下载

热门教程

JS设置CSS样式的方式汇总

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程