Javascript?動(dòng)態(tài)樣式控制方法
方法一:使用style屬性來(lái)設(shè)置
使用style屬性來(lái)設(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
屬性來(lái)設(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)文章
使用JavaScript 實(shí)現(xiàn)時(shí)間軸與動(dòng)畫效果的示例代碼(前端組件化)
這篇文章主要介紹了使用JavaScript 實(shí)現(xiàn)時(shí)間軸與動(dòng)畫效果的示例代碼(前端組件化),本文重點(diǎn)給大家介紹基礎(chǔ)的動(dòng)畫類實(shí)現(xiàn)時(shí)間軸,通過示例代碼給大家介紹的很詳細(xì),需要的朋友可以參考下2021-04-04javascript表單處理具體實(shí)現(xiàn)代碼(表單、鏈接、按鈕)
這篇文章主要介紹了javascript表單處理具體實(shí)現(xiàn)代碼,包括各種表單、鏈接、按鈕控件介紹,感興趣的朋友可以參考一下2016-05-05Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車程序
Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車程序...2006-11-11Javascript 中 null、NaN和undefined的區(qū)別總結(jié)
js中的數(shù)據(jù)類型有undefined,boolean,number,string,object等5種,前4種為原始類型,第5種為引用類型,接下來(lái)與大家分享下它們之間的區(qū)別2013-04-04JavaScript數(shù)組去重由慢到快由繁到簡(jiǎn)(優(yōu)化篇)
本文給大家介紹通過indexof去重,hash去重,排序后去重及set去重由慢到快有繁到簡(jiǎn)的方法給大家介紹了js數(shù)組去重的方法,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-08-08myFocus slide3D v1.1.0 使用方法與下載
myFocus slide3D v1.1.0 使用方法與下載,需要的朋友可以參考下。2011-01-01