JS設(shè)置CSS樣式的方式匯總
更新時間：2017年01月21日 09:41:25 作者：LiuWeiLong
這篇文章給大家總結(jié)了JS設(shè)置CSS樣式的幾種方式，每種方式都非常不錯，具有參考借鑒價值，需要的朋友參考下吧
1. 直接設(shè)置style的屬性 某些情況用這個設(shè)置 !important值無效
如果屬性有'-‘號，就寫成駝峰的形式（如textAlign） 如果想保留 - 號，就中括號的形式 element.style[‘text-align'] = ‘100px';
element.style.height = '100px';
2. 直接設(shè)置屬性（只能用于某些屬性，相關(guān)樣式會自動識別）
element.setAttribute('height', 100);
element.setAttribute('height', '100px');
3. 設(shè)置style的屬性
element.setAttribute('style', 'height: 100px !important');
!important的css定義是擁有最高的優(yōu)先級。
4. 使用setProperty 如果要設(shè)置!important，推薦用這種方法設(shè)置第三個參數(shù)
element.style.setProperty('height', '300px', 'important');
5. 改變class 比如JQ的更改class相關(guān)方法
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);
// 或者插入新樣式時操作
var styleEl = document.createElement('style'),
styleSheet = styleEl.sheet;
styleSheet.addRule('.box', 'height: 100px');
styleSheet.insertRule('.box {height: 100px}', 0);
document.head.appendChild(styleEl);
以上所述是小編給大家介紹的JS設(shè)置CSS樣式的方式匯總，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
JavaScript必知必會(九）function 說起 閉包問題
這篇文章主要介紹了JavaScript必知必會(九）function 說起 閉包問題的相關(guān)資料,需要的朋友可以參考下2016-06-06
一些不錯的JS 自定義函數(shù) ，不少網(wǎng)站都在用，都是一些比較不錯的函數(shù)，可以拿來直接使用。建議學(xué)習(xí)。2009-08-08
教你30秒發(fā)布一個TypeScript包到NPM的方法步驟
這篇文章主要介紹了教你30秒發(fā)布一個TypeScript包到NPM的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
JavaScript實現(xiàn)通過滑塊改變網(wǎng)頁顏色
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)通過滑塊改變網(wǎng)頁顏色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細(xì)介紹了原生js封裝無縫輪播功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了JS獲得QQ號碼的昵稱,頭像,生日的簡單實例，有需要的朋友可以參考一下2013-12-12
JS+html5 canvas實現(xiàn)的簡單繪制折線圖效果示例
這篇文章主要介紹了JS+html5 canvas實現(xiàn)的簡單繪制折線圖效果,結(jié)合實例形式分析了js結(jié)合HTML5 canvas技術(shù)實現(xiàn)圖形繪制的數(shù)值運算與數(shù)組遍歷等操作技巧,需要的朋友可以參考下2017-03-03
javascript每日必學(xué)之運算符，javscript的邏輯中的正序，分支，循環(huán)以及一些簡單的運算符，想要成為javascript大神的朋友不要錯過，閱讀一下2016-02-02
bootstrap daterangepicker漢化以及擴展功能
這篇文章主要為大家詳細(xì) 介紹了bootstrap daterangepicker漢化以及擴展功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
layui使用templet格式化表格數(shù)據(jù)的方法
今天小編就為大家分享一篇layui使用templet格式化表格數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09