用JS動(dòng)態(tài)設(shè)置CSS樣式常見(jiàn)方法小結(jié)(推薦)
用JS來(lái)動(dòng)態(tài)設(shè)置CSS樣式，常見(jiàn)的有以下幾種
1. 直接設(shè)置style的屬性 某些情況用這個(gè)設(shè)置 !important值無(wú)效
如果屬性有'-'號(hào)，就寫成駝峰的形式（如textAlign） 如果想保留 - 號(hào)，就中括號(hào)的形式 element.style['text-align'] = '100px';
element.style.height = '100px';
2. 直接設(shè)置屬性（只能用于某些屬性，相關(guān)樣式會(huì)自動(dòng)識(shí)別）
element.setAttribute('height', 100);
element.setAttribute('height', '100px');
3. 設(shè)置style的屬性
element.setAttribute('style', 'height: 100px !important');
4. 使用setProperty 如果要設(shè)置!important，推薦用這種方法設(shè)置第三個(gè)參數(shù)
element.style.setProperty('height', '300px', 'important');
5. 改變class 比如JQ的更改class相關(guān)方法
因JS獲取不到css的偽元素，所以可以通過(guò)改變偽元素父級(jí)的class來(lái)動(dòng)態(tài)更改偽元素的樣式
element.className = 'blue'; element.className += 'blue fb';
6. 設(shè)置cssText
element.style.cssText = 'height: 100px !important'; element.style.cssText += 'height: 100px !important';
7. 創(chuàng)建引入新的css樣式文件
function addNewStyle(newStyle) {
var styleElement = document.getElementById('styles_js');
if (!styleElement) {
styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = 'styles_js';
document.getElementsByTagName('head')[0].appendChild(styleElement);
}
styleElement.appendChild(document.createTextNode(newStyle));
}
addNewStyle('.box {height: 100px !important;}');
8. 使用addRule、insertRule
// 在原有樣式操作
document.styleSheets[0].addRule('.box', 'height: 100px');
document.styleSheets[0].insertRule('.box {height: 100px}', 0);
// 或者插入新樣式時(shí)操作
var styleEl = document.createElement('style'),
styleSheet = styleEl.sheet;
styleSheet.addRule('.box', 'height: 100px');
styleSheet.insertRule('.box {height: 100px}', 0);
document.head.appendChild(styleEl);
以上所述是小編給大家介紹的用JS動(dòng)態(tài)設(shè)置CSS樣式常見(jiàn)方法小結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了ES11屢試不爽的新特性,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
arcgis.js控制地圖地體的顯示范圍超出區(qū)域自動(dòng)彈回(實(shí)現(xiàn)思路)
這篇文章主要介紹了arcgis.js控制地圖地體的顯示范圍超出區(qū)域自動(dòng)彈回，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
js控制臺(tái)報(bào)錯(cuò)Uncaught TypeError: Cannot read p
本文主要介紹了js控制臺(tái)報(bào)錯(cuò)Uncaught TypeError: Cannot read properties of undefined (reading ‘a(chǎn)ppendChild‘)的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)文字無(wú)限輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
JavaScript ES6 Class類實(shí)現(xiàn)原理詳解
這篇文章主要介紹了JavaScript ES6 Class類實(shí)現(xiàn)原理詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法的相關(guān)資料,layer是layui的一個(gè)彈出層組件,但是可以作為獨(dú)立組件使用,需要的朋友可以參考下2023-10-10
javascript實(shí)現(xiàn)延時(shí)顯示提示框效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)延時(shí)顯示提示框效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript比較兩個(gè)對(duì)象是否相等的方法
這篇文章主要介紹了JavaScript比較兩個(gè)對(duì)象是否相等的方法,通過(guò)對(duì)js對(duì)象進(jìn)行各方面的比較來(lái)判斷兩個(gè)對(duì)象是否相等,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
JavaScript動(dòng)態(tài)檢測(cè)密碼強(qiáng)度原理及實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JavaScript動(dòng)態(tài)檢測(cè)密碼強(qiáng)度原理及實(shí)現(xiàn)方法,結(jié)合具體實(shí)例形式詳細(xì)分析了javascript針對(duì)輸入字符串密碼強(qiáng)度檢測(cè)的原理與相關(guān)判斷操作技巧,需要的朋友可以參考下2019-06-06
本文主要介紹了js實(shí)現(xiàn)華麗的九九乘法表效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03