小編給大家分享一下JS怎么設(shè)置元素樣式的，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù)團(tuán)隊(duì)是一支充滿著熱情的團(tuán)隊(duì)，執(zhí)著、敏銳、追求更好，是創(chuàng)新互聯(lián)的標(biāo)準(zhǔn)與要求，同時(shí)竭誠為客戶提供服務(wù)是我們的理念。創(chuàng)新互聯(lián)公司把每個(gè)網(wǎng)站當(dāng)做一個(gè)產(chǎn)品來開發(fā)，精雕細(xì)琢，追求一名工匠心中的細(xì)致，我們更用心！

一看到這個(gè)標(biāo)題，大家可能首先想到的就是使用“[元素].style.[CSS屬性名] = [屬性值]”這樣的套路去設(shè)置元素樣式，但實(shí)際上，我們其實(shí)還有其他方式可以選擇。

接下來，我將詳細(xì)介紹三種設(shè)置元素樣式的方式。

一、style

這個(gè)其實(shí)就是我們所熟知的方式，舉個(gè)例子~~

<div id="box"></div>

var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";

顯示效果：

這種方式看似簡單粗暴，但寫法過于繁冗，尤其是在需要添加很多樣式時(shí)尤為突出。并且需要注意的是，對(duì)于使用短劃線的CSS屬性名，必須將其轉(zhuǎn)換成駝峰大小寫形式。（如示例中的backgroundColor）

二、style.cssText

這種方式相對(duì)于上面方法更為簡潔，更像是直接在元素上寫CSS：

[元素].style.cssText = [CSS樣式];

例如：

box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

確實(shí)，寫法上很方便。

但是，缺點(diǎn)是后面同樣通過這種方式添加的樣式會(huì)覆蓋之前通過style特性指定的樣式。

同樣還是上面的例子，只不過是將兩段JS寫在一塊：

var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";
box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

如果按照層疊樣式表的特性，上面定義的紅色的背景顏色應(yīng)該還存在，然而實(shí)際上，下面通過style.cssText方式定義的樣式會(huì)將style（包括style.cssText）方式添加的樣式全部重寫。所以，這個(gè)例子最終表現(xiàn)結(jié)果與上面只有一句時(shí)的效果是一樣的：

最后注意下兼容性，IE8及更早版本均不支持cssText。

三、insertRule()

這個(gè)用法相對(duì)上面兩種方法都較為復(fù)雜一些：

[sheet].insertRule([CSS樣式]，指定位置)

[sheet]表示某個(gè)樣式表，它可以通過document.styleSheets來獲得。那么，document.styleSheets又是什么呢？ 說得簡單一點(diǎn)就是應(yīng)用在文檔中的所有樣式表，包括通過link標(biāo)簽引入的樣式和style標(biāo)簽定義的樣式。如果理解上還是有點(diǎn)困難，那么我們還是放個(gè)實(shí)例吧~~

首先頭部引入樣式表：

<link rel="stylesheet" type="text/css" href="css/index.css" rel="external nofollow" />

當(dāng)然，這個(gè)樣式表得真實(shí)存在，就算里面什么樣式都不寫也沒關(guān)系。也可以直接用style標(biāo)簽，內(nèi)容為空也不要緊。

然后用JS獲取這個(gè)樣式表：

var sheet = document.styleSheets[0];

最后我們就可以給這個(gè)樣式表中添加樣式了：

sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);

如果是在上面所有例子的基礎(chǔ)上添加的這段代碼，那么顯示結(jié)果會(huì)是這樣的：

大小還是200*200大小，背景顏色是綠色，說明通過style.cssText所設(shè)置的寬高樣式把通過insertRule()設(shè)置的樣式覆蓋了，原因很簡單，style（包括style.cssText）方式設(shè)置的樣式屬于行內(nèi)樣式，自然要比通過insertRule()設(shè)置的樣式優(yōu)先級(jí)更高咯~~

那么，示例當(dāng)中insertRule()的第二個(gè)參數(shù)0又是指的什么呢？

它指的是我們需要添加CSS代碼的位置，所以參數(shù)0就代表的是該樣式表的最開始位置。

例如，我們先給樣式表中手動(dòng)添加一段樣式（以下例子與上述例子無關(guān)）：

<style>
  #box{ width: 100px; height: 100px;}
</style>

var sheet = document.styleSheets[0];
sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);

以上執(zhí)行結(jié)果就是，寬高100*100的綠色盒子：

如果將insertRule()中的第二個(gè)參數(shù)改為1，那么通過JS添加的這段CSS代碼相當(dāng)于添加到了#box{ width: 100px; height: 100px;}的后面，類似下面這樣：

<style>
  #box{ width: 100px; height: 100px;}
  #box{ width: 300px; height: 300px; background-color: #0f0;}
</style>

顯示結(jié)果：

同樣需要注意的是，insertRule()不兼容IE8及更早版本，但可以使用addRule()替代，語法稍微有點(diǎn)不同，上面例子這樣寫：

sheet.addRule('#box','width: 300px; height: 300px; background-color: #0f0;',0);

第一個(gè)參數(shù)代表元素，第二個(gè)參數(shù)代表CSS樣式，第三個(gè)參數(shù)代表插入位置，前兩個(gè)參數(shù)必選，最后一個(gè)可選，不填則默認(rèn)為0。

以上是“JS怎么設(shè)置元素樣式的”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁標(biāo)題：JS怎么設(shè)置元素樣式的-創(chuàng)新互聯(lián)
分享地址：http://aaarwkj.com/article40/iciho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站策劃、移動(dòng)網(wǎng)站建設(shè)、電子商務(wù)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)