JS控制css样式的几种方式

2019-12-27

字数：1089 阅读时间：6min

阅读量：15115

我们在js的工作学习中总会遇到一些不轻易通过style属性动态加载css样式的情况(eg:伪类的样式控制,动画的样式控制)，这里总结一下js改变样式的几种方法：

1，通过style属性或者setAttribute()来更改样式

ele.style.width='50px';//最常用
ele.style.cssText='width:50px';//并不会覆盖原先所有css
ele.style.setProperty("width", "50px", "important");//可以传第三个参数
ele.setAttribute("style", "width: 50px")//也不会覆盖原先所有css放心用

ele.style.width='50px';//最常用

ele.style.cssText='width:50px';//并不会覆盖原先所有css

ele.style.setProperty("width", "50px", "important");//可以传第三个参数

ele.setAttribute("style", "width: 50px")//也不会覆盖原先所有css放心用

2，如果只是改变伪类(after,before)的content内容也可以这么做

//css代码
div::after{
content:attr(data-myadd);
width:10px;
}
//js代码
div.setAttribute('data-myadd',需要动态加载的内容)

//css代码

div::after{

content:attr(data-myadd);

width:10px;

}

//js代码

div.setAttribute('data-myadd',需要动态加载的内容)

3，通过更改类名来更改样式

ele.className='';
ele.classList.add();//emmmm没什么好说的

1 2	ele.className=''; ele.classList.add();//emmmm没什么好说的

4，那么重点来了：利用document.styleSheets我们获取到所有样式表，然后选择一个样式表通过 insertRule 来添加样式；也可以创建新的cssRules，通过addRule()来添加样式

document.styleSheets：获取到的是所有样式列表的集合
- href：通过link标签引入的样式表，则是样式表的URL，否则为null
- media：当前样式表支持的所有媒体类型集合
- type：样式表类型的字符串
- disabled：通过disabled来屏蔽掉该样式表，可以用来切换样式表； document.styleSheets[i].disabled = true
- cssRules：是当前样式列表的所有样式集合；document.styleSheets[i].cssRules
  - cssText：当前样式表的某一个样式的样式document.styleSheets[i].cssRules[i].cssText
  - selectorText：当前样式的选择符
  - parentStyleSheet：当前规则所属样式表；IE不支持
- insertRule(rule,index)：在index前插入一条rule新规则； document.styleSheets[0].insertRule('* {background:blue;color:#000}',0)不支持IE；document.styleSheets[0].addRule('*',' {background:blue;color:#000}',0)支持IE；
- deleteRule(index)：删除某个央视列表的第index个样式；IE用removeRule(index)

//使用document.styleSheets获取样式表的时候最好获取最后一个，在最后一个样式表上添加样式
var sheets=document.styleSheets;
var lastSheet=sheets[sheets.length-1];
lastSheet.insertRule('#div{width:10px}',index)//将#div样式直接添加到cssRules中;index是添加到第几条;现代浏览器
lastSheet.addRule('div','width:10px;',0)//IE浏览器

//使用document.styleSheets获取样式表的时候最好获取最后一个，在最后一个样式表上添加样式

var sheets=document.styleSheets;

var lastSheet=sheets[sheets.length-1];

lastSheet.insertRule('#div{width:10px}',index)//将#div样式直接添加到cssRules中;index是添加到第几条;现代浏览器

lastSheet.addRule('div','width:10px;',0)//IE浏览器

5，动态加载样式表

如果需要更改的样式比较多，还是建议通过动态加载样式的方式来改变页面样式

//改变样式文件的引用
function loadStyle(url){
　　var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
var head = document.getElementsByTagName('head')[0];
head.appendChild(link);
}
loadStyle('test.css');
//动态加载css代码片段
var style = document.createElement('style');
style.type = 'text/css';
style.rel = 'stylesheet';
try{ //Chrome Firefox Opera Safari
style .appendChild(document.createTextNode(code));
}catch(ex){//IE
style.styleSheet.cssText = code;
}
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);
}
loadCssCode('body{background-color:#f00}');

//改变样式文件的引用

function loadStyle(url){

　　var link = document.createElement('link');

link.type = 'text/css';

link.rel = 'stylesheet';

link.href = url;

var head = document.getElementsByTagName('head')[0];

head.appendChild(link);

}

loadStyle('test.css');

//动态加载css代码片段

var style = document.createElement('style');

style.type = 'text/css';

style.rel = 'stylesheet';

try{ //Chrome Firefox Opera Safari

style .appendChild(document.createTextNode(code));

}catch(ex){//IE

style.styleSheet.cssText = code;

}

var head = document.getElementsByTagName('head')[0];

head.appendChild(style);

}

loadCssCode('body{background-color:#f00}');

暂时就想到这么几种，后续补充

野生小园猿

励志做一只遨游在知识海洋里的小白鲨

查看“野生小园猿”的所有文章 →