JS控制css樣式的幾種方式
我們在js的工作學習中總會遇到一些不輕易通過style屬性動態(tài)加載css樣式的情況(eg:偽類的樣式控制,動畫的樣式控制)，這里總結一下js改變樣式的幾種方法：
1，通過style屬性或者setAttribute()來更改樣式
ele.style.width='50px';//最常用
ele.style.cssText='width:50px';//并不會覆蓋原先所有css
ele.style.setProperty("width",?"50px",?"important");//可以傳第三個參數(shù)
ele.setAttribute("style",?"width:?50px")//也不會覆蓋原先所有css放心用
ele.style.width='50px';//最常用
ele.style.cssText='width:50px';//并不會覆蓋原先所有css
ele.style.setProperty("width",?"50px",?"important");//可以傳第三個參數(shù)
ele.setAttribute("style",?"width:?50px")//也不會覆蓋原先所有css放心用
2，如果只是改變偽類(after,before)的content內容也可以這么做
//css代碼
div::after{
content:attr(data-myadd);
width:10px;
}
//js代碼
div.setAttribute('data-myadd',需要動態(tài)加載的內容)
//css代碼
div::after{
content:attr(data-myadd);
width:10px;
}
//js代碼
div.setAttribute('data-myadd',需要動態(tài)加載的內容)
3，通過更改類名來更改樣式
ele.className='';
ele.classList.add();//emmmm沒什么好說的
ele.className='';
ele.classList.add();//emmmm沒什么好說的
4，那么重點來了：利用document.styleSheets我們獲取到所有樣式表，然后選擇一個樣式表通過 insertRule 來添加樣式；也可以創(chuàng)建新的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：當前規(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)：刪除某個央視列表的第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是添加到第幾條;現(xiàn)代瀏覽器
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是添加到第幾條;現(xiàn)代瀏覽器
lastSheet.addRule('div','width:10px;',0)//IE瀏覽器
5，動態(tài)加載樣式表
如果需要更改的樣式比較多，還是建議通過動態(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');
//動態(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');
//動態(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}');
本文來自PHP中文網，原文地址：https://www.php.cn/website-design-ask-479590.html?推薦視頻教程：《js基礎教程》
