js控制css的方式有哪些

本篇內(nèi)容主要講解“js控制css的方式有哪些”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“js控制css的方式有哪些”吧!

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

JS控制css樣式的方式

1，通過(guò)style屬性或者setAttribute()來(lái)更改樣式

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，如果只是改變偽類(lèi)(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，通過(guò)更改類(lèi)名來(lái)更改樣式

ele.className='';
ele.classList.add();//emmmm沒(méi)什么好說(shuō)的

ele.className='';
ele.classList.add();//emmmm沒(méi)什么好說(shuō)的

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

document.styleSheets：獲取到的是所有樣式列表的集合
href：通過(guò)link標(biāo)簽引入的樣式表，則是樣式表的URL，否則為null
media：當(dāng)前樣式表支持的所有媒體類(lèi)型集合
type：樣式表類(lèi)型的字符串
disabled： 通過(guò)disabled來(lái)屏蔽掉該樣式表，可以用來(lái)切換樣式表 ； 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)加載樣式表

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

//改變樣式文件的引用
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}');

到此，相信大家對(duì)“js控制css的方式有哪些”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！