Javascript?動(dòng)態(tài)樣式控制方法
更新時(shí)間：2022年03月06日 15:30:52 作者：稻田里展望者
這篇文章主要介紹了Javascript?動(dòng)態(tài)樣式控制方法。文章總結(jié)了兩個(gè)方法使用style屬性來設(shè)置和定義好類選擇器的樣式,通過元素的ClassName屬性來設(shè)置其Class屬性值,需要的朋友可以參考一下
方法一:使用style屬性來設(shè)置
使用style屬性來設(shè)置
html代碼：
?? ?<div id="div1"> ? ? ? ? div ? ? </div>
Javascript代碼：
var div1 = document.getElementById("div1");
? ? ? ? div1.onclick = function () {
? ? ? ? ? ? //修改樣式
? ? ? ? ? ? div1.style.border = "1px solid red";
? ? ? ? ? ? div1.style.width = "200 px";
? ? ? ? ? ? div1.style.fontSize = "200px";
? ? ? ? }方法二：定義好類選擇器的樣式
定義好類選擇器的樣式,通過元素的ClassName屬性來設(shè)置其Class屬性值,用的比較多
html代碼：
? ?<div id="div2"> ? ? ? ? div2 ? ? </div>
Css代碼：
? <style>
? ? ? ? .d1{
? ? ? ? ? ? border: 1px solid red;
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? }
? ? ? ? .d2{
? ? ? ? ? ? border: 1px solid blue;
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? }
? ? </style>javascript代碼：
var div2 = document.getElementById("div2");
? ? ? ? div2.onclick = function () {
? ? ? ? ? ? div2.className = "d1";
? ? ? ? }
到此這篇關(guān)于Javascript 動(dòng)態(tài)樣式控制方法的文章就介紹到這了,更多相關(guān)Javascript 動(dòng)態(tài)樣內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS+html5 canvas實(shí)現(xiàn)的簡單繪制折線圖效果示例
這篇文章主要介紹了JS+html5 canvas實(shí)現(xiàn)的簡單繪制折線圖效果,結(jié)合實(shí)例形式分析了js結(jié)合HTML5 canvas技術(shù)實(shí)現(xiàn)圖形繪制的數(shù)值運(yùn)算與數(shù)組遍歷等操作技巧,需要的朋友可以參考下2017-03-03
如何使用less實(shí)現(xiàn)隨機(jī)下雪動(dòng)畫詳解
這篇文章主要給大家介紹了關(guān)于如何使用less實(shí)現(xiàn)隨機(jī)下雪動(dòng)畫的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
引用類型是一種數(shù)據(jù)結(jié)構(gòu)，用于將數(shù)據(jù)和功能組織在一起。這篇文章主要介紹了JavaScript入門教程之引用類型的相關(guān)資料，需要的朋友一起學(xué)習(xí)吧2016-05-05
利用CSS、JavaScript及Ajax實(shí)現(xiàn)圖片預(yù)加載的三大方法
本文主要介紹了利用CSS、JavaScript及Ajax實(shí)現(xiàn)圖片預(yù)加載的三大方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
滑動(dòng)門,簡潔,新手上路制作篇 (小鴿子系列)...2007-04-04
無間斷滾動(dòng)的新聞文章列表 多瀏覽器兼容...2007-01-01
論壇中kayeun在我的版面發(fā)了一個(gè)問題，關(guān)于PNG透明背景在FIREFOX瀏覽器下顯示異常。 這里談一下不同瀏覽器內(nèi)，如何應(yīng)用PNG圖片作背景。2009-06-06
這篇文章主要為大家詳細(xì)介紹了一個(gè)簡易的js圖片輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
js的函數(shù)的按值傳遞參數(shù)(實(shí)例講解)
下面小編就為大家分享一篇js的函數(shù)的按值傳遞參數(shù)的實(shí)例，具有很好的參考價(jià)值，一起跟隨小編過來看看吧，希望對(duì)大家有所幫助2017-11-11
JavaScript實(shí)現(xiàn)的鼠標(biāo)跟隨特效示例【2則實(shí)例】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的鼠標(biāo)跟隨特效,結(jié)合2則實(shí)例形式分析了javascript針對(duì)鼠標(biāo)事件的響應(yīng)、計(jì)算、處理及頁面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12