您好,登錄后才能下訂單哦!
下面我給大家介紹的是原生js更改CSS樣式的兩種方式:
1. 通過(guò)在javascript代碼中的node.style.cssText="css表達(dá)式1;css表達(dá)式2;css表達(dá)式3 "的方式直接更改CSS樣式。
2. 先在CSS樣式表中對(duì)特定的類如“active類”設(shè)置樣式(這里的active類是假定的,暫時(shí)不存在),然后再在javascript代碼中通過(guò)node.classname="active"使得CSS樣式表中對(duì)active類的樣式設(shè)置附加到該node節(jié)點(diǎn)上來(lái)。
下面是詳細(xì)介紹,首先是html的代碼:
<style type="text/css"> div { float: left; padding: 20px; margin: 10px; border: 1px solid #000; background-color: #fff; color: #000; } .active { background-color:blue } </style> <body> <div class="root"> </div> </body>
只是一個(gè)簡(jiǎn)單的div,運(yùn)行結(jié)果為
首先使用上面所說(shuō)的第一種方式更改css樣式,寫入如下的javascript代碼:
<script type="text/javascript"> var root=document.getElementsByClassName("root")[0]; root.style.cssText="background-color: blue;color: #fff;"; </script>
運(yùn)行結(jié)果為:
然后使用上面所說(shuō)的第二種方式更改css樣式,寫入如下的javascript代碼:
<script type="text/javascript"> var root=document.getElementsByClassName("root")[0]; root.className="active"; </script>
同樣運(yùn)行結(jié)果為:
總結(jié):這兩種方式結(jié)果相同,但就操作過(guò)程而言,第二種方式也就是“node.classname”的方式使得css和js的寫入分隔開(kāi)來(lái),顯然更加合理有序一些。如果css語(yǔ)句比較簡(jiǎn)單的話,這兩種方式?jīng)]有差別,但若css語(yǔ)句比較復(fù)雜的話,顯然第二種方式比較有條不紊。
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持億速云!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。