詳解Javascript動(dòng)態(tài)操作CSS
一、使用js操作css屬性的寫法
1、對(duì)于沒有中劃線的css屬性一般直接使用style.屬性名即可。
如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position
2、對(duì)于含有中劃線的css屬性,將每個(gè)中劃線去掉并將每個(gè)中劃線后的第一個(gè)字符換成大寫即可。
如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamily等
3、js操作css float屬性的特殊寫法
因?yàn)?float 是javascript的保留字,我們不能直接使用obj.style.float來使用,這樣操作是無效的。其正確的使用方法是為:IE:obj.style.styleFloat,其他瀏覽器Mozilla(gecko),ff等用 styleFloat:obj.style.cssFloat。
二、使用js獲取css屬性值
1、獲取行內(nèi)Style:obj.style. 屬性名。<div id="css88" class="ss" style="width:200px; height:200px; background:#333333">JS獲取CSS屬性值</div> 不能訪問class。
2、獲取Class內(nèi)及Link外部的Css屬性:IE中使用的是obj.currentStyle[“屬性名”]方法,而FF是用的是getComputedStyle 方法
三、使用js給css屬性賦值
1、賦值class屬性
賦值:document.getElementById('ceil').className = "class1";
如它有多個(gè)值:document.getElementById('ceil').className = "class1 class2 class3";
2、obj.style.cssText設(shè)定一個(gè)對(duì)象的css樣式
document.getElementById('navition').style.cssText = "您的CSS代碼';
總結(jié)
知道如何動(dòng)態(tài)修改頁(yè)面上所應(yīng)用的樣式,對(duì)創(chuàng)建時(shí)髦而又富于交互的 Web 頁(yè)面來說是極其有用的——本文中所闡述的知識(shí)構(gòu)成了諸如 JavaScript 動(dòng)畫之類更高級(jí)的技術(shù)的基礎(chǔ)。需要注意的是,你應(yīng)當(dāng)負(fù)責(zé)任地使用動(dòng)態(tài)樣式修改,而且不要過度濫用。如前面所述,樣式修改還能提高Web效率——內(nèi)容的顯示和隱藏可以有助于避免在客戶端和服務(wù)器之間不必要的數(shù)據(jù)交互。
相關(guān)文章
利用JavaScript實(shí)現(xiàn)新聞滾動(dòng)效果(實(shí)例代碼)
這篇文章主要是對(duì)利用JavaScript實(shí)現(xiàn)新聞滾動(dòng)效果的兩種方法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11淺談bootstrap源碼分析之tab(選項(xiàng)卡)
下面小編就為大家?guī)硪黄獪\談bootstrap源碼分析之tab(選項(xiàng)卡)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06bootstrap實(shí)現(xiàn)的自適應(yīng)頁(yè)面簡(jiǎn)單應(yīng)用示例
這篇文章主要介紹了bootstrap實(shí)現(xiàn)的自適應(yīng)頁(yè)面簡(jiǎn)單應(yīng)用,結(jié)合具體實(shí)例形式分析了基于bootstrap的列表布局結(jié)構(gòu)頁(yè)面實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2017-03-03

js實(shí)現(xiàn)公告自動(dòng)滾動(dòng)

建立良好體驗(yàn)度的Web注冊(cè)系統(tǒng)ajax

JavaScript登錄驗(yàn)證碼的實(shí)現(xiàn)