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