js設(shè)置css樣式,js設(shè)置css樣式失效
筆記：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ù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(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之類(lèi)的獲取的標(biāo)簽。
這種方式，簡(jiǎn)單直接。但是要修改大量的樣式的時(shí)候，不適合。所以，我更推薦第二種方式。
2、更改類(lèi)名
xID.className?=?"xx???yy";
如果有多個(gè)類(lèi)，就用空格隔開(kāi)。前提，在樣式中要有已有類(lèi)的定義。比如這里的xx和yy類(lèi)，在css中應(yīng)該是寫(xiě)好的。
這種方式把所有的樣式寫(xiě)在了css文件中，適合更改較多的樣式以及炫酷的樣式。js就只做一件事情：改類(lèi)。至于這個(gè)類(lèi)會(huì)把標(biāo)簽變成什么樣子，交給css吧。
通過(guò)jquery也可以達(dá)到如上的效果：
$("#xID").css({
fontSize:"12px",
display:"block"
});??//?直接更改樣式
$("#xID").addClass("xx");??//?增加刪除類(lèi)
$("#xID").removeClass("xx");
JS修改CSS設(shè)置的樣式
語(yǔ)法：元素.style.樣式名=樣式值
注意：如果CSS的樣式名中含有-，這種名稱(chēng)在JS中是不合法的，比如 background-color 。需要將這種樣式名修改為駝峰命名法：去掉-，然后將-后的第一個(gè)字母大寫(xiě)，比如 backgroundColor
我們通過(guò)style屬性設(shè)置的樣式都是內(nèi)聯(lián)樣式，而內(nèi)聯(lián)樣式有較高的優(yōu)先級(jí)，所以通過(guò)JS修改的樣式往往會(huì)立即顯示
但是如果在樣式中寫(xiě)了!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、效果如圖
新聞名稱(chēng)：js設(shè)置css樣式,js設(shè)置css樣式失效
網(wǎng)址分享：http://m.jiaotiyi.com/article/dsippij.html