JS修改CSS設(shè)置的樣式

語法：元素.style.樣式名=樣式值

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、做網(wǎng)站服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)八宿免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

注意：如果CSS的樣式名中含有-，這種名稱在JS中是不合法的，比如 background-color 。需要將這種樣式名修改為駝峰命名法：去掉-，然后將-后的第一個字母大寫，比如 backgroundColor

我們通過style屬性設(shè)置的樣式都是內(nèi)聯(lián)樣式，而內(nèi)聯(lián)樣式有較高的優(yōu)先級，所以通過JS修改的樣式往往會立即顯示

但是如果在樣式中寫了!important，則此時樣式會有最高的優(yōu)先級，即使通過JS也不能覆蓋該樣式，此時將會導(dǎo)致JS修改樣式失效

所以盡量不要為樣式添加!important

語法：元素.style.樣式名

通過style屬性設(shè)置和讀取的都是內(nèi)聯(lián)樣式，無法讀取樣式表中的樣式

語法:元素.currentStyle.樣式名

如果當(dāng)前元素沒有設(shè)置該樣式，則獲取它的默認(rèn)值

例如： box1.currentStyle.width

這個方法是window的方法，可以直接使用需要兩個參數(shù)

第一個:要獲取樣式的元素

第二個:可以傳遞一個偽元素，一般都傳null

該方法會返回一個對象，對象中封裝了當(dāng)前元素對應(yīng)的樣式

可以通過對象﹒樣式名來讀取樣式

如果獲取的 樣式?jīng)]有設(shè)置 ，則會獲取到真實的值，而不是默認(rèn)值

比如:沒有設(shè)置width，它不會獲取到auto，而是 一個長度

注意：通過currentStyle和getComputedstyle()讀取到的樣式都是只讀的，不能修改,如果要修改必須通過style屬性

參數(shù)：

obj 要獲取樣式的元素

name 要獲取的樣式名

如何使用JavaScript的className屬性改變網(wǎng)頁的樣式？

網(wǎng)頁的樣式一般都定義在了css的文件中，而JavaScript中的className的屬性能讓css中的樣式動態(tài)的應(yīng)用到網(wǎng)頁的元素上。比如，在css中有樣式.example。代碼如下：

.example {

color: #fff;

font-size 1em;

text-align: right;

}

要用JavaScript動態(tài)的應(yīng)用到網(wǎng)頁上，可以使用如下類似的代碼：

function preparePage() {

//當(dāng)mainContent元素被點擊，mainContent的樣式將會改變

document.getElementById("mainContent").onclick = function() {

//檢查當(dāng)前mainContent的樣式，若是example，則將樣式取消。

//取消樣式直接將className屬性賦值為空字符串””就行。

//若mainContent的樣式不是example，則應(yīng)用example樣式。

if( document.getElementById("mainContent").className == "example") {

document.getElementById("mainContent").className = "";

} else {

document.getElementById("mainContent").className = "example";

}

};

}

window.onload = function() {

preparePage();

}

通過上面的JavaScript代碼，我們可以通過點擊來控制mainContent元素的樣式。上面的代碼是從秒秒學(xué)上扣出來的，如果你想要完整的案例，可以在秒秒學(xué)的《使用JavaScript美化界面》一章中找到。

JavaScript修改CSS樣式的常用方法有哪些?

有兩種辦法

(1)敲代碼直接修改

(2)獲取對象，通過style來動態(tài)修改

document三個方法：getElementById()、getElementsByTagName()、getElementsByName()

或者通過傳參數(shù)的方法獲取對象,再對對象的style樣式里的屬性進行修改,例如document.getElementById("el").style.color="red";

document.getElementById("el").style.backgroundImage="2.png";

javascript 改變指定css樣式

javascript改變CSS樣式分為局部和全局，分別如下：

一、局部改變樣式

有三種方法：直接改變樣式、改變className和改變cssText

改變className： document.getElementById('obj').className="…"

改變cssText：document.getElementById('obj').style.cssText="width:20px; border:solid 1px #f00;";

改變直接樣式： document.getElementById('obj').style.backgroundColor="#003366″

二、全局改變樣式

通過改變外鏈樣式的的href的值實現(xiàn)網(wǎng)頁樣式的實時切換，也就是"改變模板風(fēng)格"。

首先需要賦予需要改變的目標(biāo)一個id，如

代碼如下:

link rel="stylesheet" type="text/css" id="css" href="firefox.css" /

調(diào)用時很簡單，如

代碼如下:

span onclick="javascript:document.getElementById('css').href='ie.css'"點我改變樣式/span

名稱欄目：關(guān)于javascript網(wǎng)頁改樣式的信息
文章網(wǎng)址：http://jinyejixie.com/article46/dsdjghg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、網(wǎng)頁設(shè)計公司、網(wǎng)站收錄、商城網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)

廣告

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