本篇内容主要讲解“js控制css的方式有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“js控制css的方式有哪些”吧!
js控制css的方法：1、通过style属性或者“setAttribute()”来更改样式；2、改变伪类“(after,before)”的“content”内容；3、通过更改类名来更改样式等等。
JS控制css样式的方式
1，通过style属性或者setAttribute()来更改样式
ele.style.width='50px';//最常用ele.style.cssText='width:50px';//并不会覆盖原先所有cssele.style.setProperty("width", "50px", "important");//可以传第三个参数ele.setAttribute("style", "width: 50px")//也不会覆盖原先所有css放心用ele.style.width='50px';//最常用ele.style.cssText='width:50px';//并不会覆盖原先所有cssele.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没什么好说的ele.className='';ele.classList.add();//emmmm没什么好说的4，那么重点来了：利用document.styleSheets我们获取到所有样式表，然后选择一个样式表通过 insertRule 来添加样式；也可以创建新的cssRules，通过addRule()来添加样式
document.styleSheets：获取到的是所有样式列表的集合href：通过link标签引入的样式表，则是样式表的URL，否则为nullmedia：当前样式表支持的所有媒体类型集合type：样式表类型的字符串disabled： 通过disabled来屏蔽掉该样式表，可以用来切换样式表 ； document.styleSheets[i].disabled = truecssRules：是当前样式列表的所有样式集合；document.styleSheets[i].cssRulescssText：当前样式表的某一个样式的样式document.styleSheets[i].cssRules[i].cssTextselectorText：当前样式的选择符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}');到此，相信大家对“js控制css的方式有哪些”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
