小編給大家分享一下js開發(fā)之動(dòng)態(tài)修改網(wǎng)頁(yè)元素樣式的方法,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
創(chuàng)新互聯(lián)主營(yíng)橋西網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件定制開發(fā),橋西h5微信小程序開發(fā)搭建,橋西網(wǎng)站營(yíng)銷推廣歡迎橋西等地區(qū)企業(yè)咨詢在前端開發(fā)中,有時(shí)候需要?jiǎng)討B(tài)修改的網(wǎng)頁(yè)元素的樣式,這里將使用JS動(dòng)態(tài)修改元素樣式的方法做個(gè)小結(jié)。
網(wǎng)頁(yè)結(jié)構(gòu):
按鈕:
標(biāo)簽:input 類型:button id:btn value:點(diǎn)我
p:
標(biāo)簽:p id:box
使用JS修改網(wǎng)頁(yè)元素樣式有兩種方式:
1.使用ClassName
2.使用Style對(duì)象
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM操作元素的樣式</title> <style type="text/css"> .box{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <input type="button" id="btn" value="點(diǎn) 我" /> <div id="box"></div> <!-- 添加JS代碼 --> <script type="text/javascript"> //定義函數(shù)my$-根據(jù)元素id獲得頁(yè)面元素,目的是為了提高效率 function my$(id){ return document.getElementById(id); } // 方法1.根據(jù)ClassName修改元素的樣式 // var btn=my$('btn'); // btn.onclick=function(){ // my$('box').className='box'; // } //方法2.根據(jù)Style對(duì)象修改元素的樣式 var btn=my$('btn'); btn.onclick=function(){ var box=my$('box'); box.style.width="100px"; box.style.height="100px"; box.style.backgroundColor="red"; } </script> </body> </html>
相關(guān)教程:HTML視頻教程
注意:
1.操作樣式的時(shí)候,使用例樣式ClassName還是使用Style對(duì)象??
當(dāng)設(shè)置多個(gè)樣式屬性的時(shí)候使用類樣式方便
當(dāng)設(shè)置樣式屬性比較少的時(shí)候,使用Style對(duì)象比較方便
2.在使用Style對(duì)象的時(shí)候,遇見(jiàn)寬、高屬性,必須加px單位
3.Style對(duì)象屬性樣式的值是字符串
結(jié)果圖如圖:
看完了這篇文章,相信你對(duì)js開發(fā)之動(dòng)態(tài)修改網(wǎng)頁(yè)元素樣式的方法有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
當(dāng)前文章:js開發(fā)之動(dòng)態(tài)修改網(wǎng)頁(yè)元素樣式的方法-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于:http://muchs.cn/article10/cddcdo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、電子商務(wù)、企業(yè)建站、全網(wǎng)營(yíng)銷推廣、響應(yīng)式網(wǎng)站
聲明:本網(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)
猜你還喜歡下面的內(nèi)容