js控制css的方法：1、通過style屬性或者“setAttribute()”來更改樣式；2、改變偽類“(after,before)”的“content”內(nèi)容；3、通過更改類名來更改樣式等等。

本文操作環(huán)境：windows7系統(tǒng)、javascript1.8.5&&CSS3版，DELL G3電腦

js如何控制css？

JS控制css樣式的幾種方式

我們在js的工作學(xué)習(xí)中總會(huì)遇到一些不輕易通過style屬性動(dòng)態(tài)加載css樣式的情況(eg:偽類的樣式控制,動(dòng)畫的樣式控制)，這里總結(jié)一下js改變樣式的幾種方法：

1，通過style屬性或者setAttribute()來更改樣式

ele.style.width='50px';//最常用 ele.style.cssText='width:50px';//并不會(huì)覆蓋原先所有css ele.style.setProperty("width", "50px", "important");//可以傳第三個(gè)參數(shù) ele.setAttribute("style", "width: 50px")//也不會(huì)覆蓋原先所有css放心用

ele.style.width='50px';//最常用 ele.style.cssText='width:50px';//并不會(huì)覆蓋原先所有css ele.style.setProperty("width", "50px", "important");//可以傳第三個(gè)參數(shù) ele.setAttribute("style", "width: 50px")//也不會(huì)覆蓋原先所有css放心用

2，如果只是改變偽類(after,before)的content內(nèi)容也可以這么做

//css代碼 div::after{     content:attr(data-myadd);     width:10px; } //js代碼 div.setAttribute('data-myadd',需要?jiǎng)討B(tài)加載的內(nèi)容)

//css代碼 div::after{     content:attr(data-myadd);     width:10px; } //js代碼 div.setAttribute('data-myadd',需要?jiǎng)討B(tài)加載的內(nèi)容)

3，通過更改類名來更改樣式

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

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

4，那么重點(diǎn)來了：利用document.styleSheets我們獲取到所有樣式表，然后選擇一個(gè)樣式表通過 insertRule 來添加樣式；也可以創(chuàng)建新的cssRules，通過addRule()來添加樣式

document.styleSheets：獲取到的是所有樣式列表的集合 href：通過link標(biāo)簽引入的樣式表，則是樣式表的URL，否則為null media：當(dāng)前樣式表支持的所有媒體類型集合 type：樣式表類型的字符串 disabled： 通過disabled來屏蔽掉該樣式表，可以用來切換樣式表 ； document.styleSheets[i].disabled = true cssRules：是當(dāng)前樣式列表的所有樣式集合；document.styleSheets[i].cssRules cssText：當(dāng)前樣式表的某一個(gè)樣式的樣式document.styleSheets[i].cssRules[i].cssText selectorText：當(dāng)前樣式的選擇符 parentStyleSheet：當(dāng)前規(guī)則所屬樣式表；IE不支持 insertRule(rule,index)：在index前插入一條rule新規(guī)則； document.styleSheets[0].insertRule('* {background:blue;color:#000}',0)不支持IE；document.styleSheets[0].addRule('*',' {background:blue;color:#000}',0)支持IE； deleteRule(index)：刪除某個(gè)央視列表的第index個(gè)樣式；IE用removeRule(index) //使用document.styleSheets獲取樣式表的時(shí)候最好獲取最后一個(gè)，在最后一個(gè)樣式表上添加樣式 var sheets=document.styleSheets; var lastSheet=sheets[sheets.length-1]; lastSheet.insertRule('#div{width:10px}',index)//將#div樣式直接添加到cssRules中;index是添加到第幾條;現(xiàn)代瀏覽器 lastSheet.addRule('div','width:10px;',0)//IE瀏覽器

//使用document.styleSheets獲取樣式表的時(shí)候最好獲取最后一個(gè)，在最后一個(gè)樣式表上添加樣式 var sheets=document.styleSheets; var lastSheet=sheets[sheets.length-1]; lastSheet.insertRule('#div{width:10px}',index)//將#div樣式直接添加到cssRules中;index是添加到第幾條;現(xiàn)代瀏覽器 lastSheet.addRule('div','width:10px;',0)//IE瀏覽器

5，動(dòng)態(tài)加載樣式表

如果需要更改的樣式比較多，還是建議通過動(dòng)態(tài)加載樣式的方式來改變頁面樣式

//改變樣式文件的引用 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'); //動(dòng)態(tài)加載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');   //動(dòng)態(tài)加載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}');

推薦學(xué)習(xí)：《javascript高級教程》