筆記：JS設(shè)置CSS樣式的幾種方式

1、直接更改，比如：

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)武夷山,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18980820575

xID.style.display?=?"block";?//?更改display屬性，會(huì)覆蓋css中的定義。

xID.style.display?=?"";??????//?取消js更改display屬性，以css樣式為準(zhǔn)。

這里的xID，是通過(guò)id獲取的標(biāo)簽。當(dāng)然，也可能是通過(guò)tagName之類的獲取的標(biāo)簽。

這種方式，簡(jiǎn)單直接。但是要修改大量的樣式的時(shí)候，不適合。所以，我更推薦第二種方式。

2、更改類名

xID.className?=?"xx???yy";

如果有多個(gè)類，就用空格隔開(kāi)。前提，在樣式中要有已有類的定義。比如這里的xx和yy類，在css中應(yīng)該是寫好的。

這種方式把所有的樣式寫在了css文件中，適合更改較多的樣式以及炫酷的樣式。js就只做一件事情：改類。至于這個(gè)類會(huì)把標(biāo)簽變成什么樣子，交給css吧。

通過(guò)jquery也可以達(dá)到如上的效果：

$("#xID").css({

fontSize:"12px",

display:"block"

});??//?直接更改樣式

$("#xID").addClass("xx");??//?增加刪除類

$("#xID").removeClass("xx");

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

語(yǔ)法：元素.style.樣式名=樣式值

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

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

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

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

語(yǔ)法：元素.style.樣式名

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

語(yǔ)法:元素.currentStyle.樣式名

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

例如： box1.currentStyle.width

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

第一個(gè):要獲取樣式的元素

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

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

可以通過(guò)對(duì)象﹒樣式名來(lái)讀取樣式

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

比如:沒(méi)有設(shè)置width，它不會(huì)獲取到auto，而是 一個(gè)長(zhǎng)度

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

參數(shù)：

obj 要獲取樣式的元素

name 要獲取的樣式名

如何用JS來(lái)改變CSS屬性？

通過(guò)js來(lái)改變CSS屬性，使用jQuery可以很方便的實(shí)現(xiàn)，像這樣：

$("img").css('border-color','red');

就可以把邊框顏色都變成紅色。

這是針對(duì)此問(wèn)題的測(cè)試頁(yè)面

2、這是3張圖片

img src=';fm=11gp=0.jpg'

img src=';fm=11gp=0.jpg'

img src=';fm=11gp=0.jpg'

3、這是圖片的樣式，邊框默認(rèn)為灰色。

img{

max-width:200px;

border-color:gray;

border-width:10px;

border-style:solid;

}

4、現(xiàn)在通過(guò)這幾行用到j(luò)Query的代碼，控制圖片邊框根據(jù)鼠標(biāo)移入移出邊框變灰和變紅。

$(function(){

$("img").on('mouseover',function(){

$(this).css('border-color','red');

}).on('mouseout',function(){

$(this).css('border-color','gray');

});

});

5、效果如圖

網(wǎng)站標(biāo)題：js設(shè)置css樣式,js設(shè)置css樣式失效
地址分享：http://chinadenli.net/article7/dsippij.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)頁(yè)設(shè)計(jì)公司、ChatGPT、微信小程序、靜態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)