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樣式的方式匯總，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
javascript中mouseover、mouseout使用詳解
這篇文章主要介紹了javascript中mouseover、mouseout使用詳解的相關(guān)資料,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細介紹了HTML5實現(xiàn)拖拉上傳文件功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
如果你希望求某一特定路徑（例如從根到葉子）上數(shù)字的和,那么問題就轉(zhuǎn)變?yōu)榱恕扒蠖鏄鋸母饺~的所有路徑和”,所以本文給大家介紹了如何使用JavaScript求二叉樹從根到葉的所有路徑和,需要的朋友可以參考下2023-10-10
本篇文章主要介紹Javascript+CSS3實現(xiàn)進度條效果，可以實現(xiàn)給用戶一個等待的過程，有需要的可以了解一下。2016-10-10
這篇文章主要介紹了Javascript圖片預加載，幫助大家理解Javascript圖片預加載的實現(xiàn)原理，感興趣的小伙伴們可以參考一下2016-02-02
Echo 是一個獨立的 JavaScript 懶加載圖像的工具，快速、體積?。ú蛔?k）和使用 HTML5 的 data- 屬性，通過本文給大家介紹JavaScript圖像延遲加載庫Echo.js ，感興趣的朋友一起學習吧2016-04-04
這篇文章主要介紹了JS實現(xiàn)自動變換的菜單效果代碼,可實現(xiàn)自動變換菜單選中項的技巧,涉及JavaScript定時函數(shù)觸發(fā)頁面樣式屬性變換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要給大家介紹了關(guān)于小程序自定義tab-bar踩坑實戰(zhàn)的相關(guān)資料,包括下載代碼、放置文件、修改JS文件、配置app.json和隱藏原生導航欄等步驟,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-12-12
webpack4與babel配合使es6代碼可運行于低版本瀏覽器的方法
這篇文章主要介紹了webpack4與babel配合使es6代碼可運行于低版本瀏覽器的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了在微信小程序中使用vant的方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06