Javascript通過控制類名更改樣式
更新時間：2019年05月24日 14:48:51 作者：沈行的專欄
這篇文章主要介紹了Javascript通過控制類名更改樣式，下面來和小編一起來學(xué)習(xí)吧
控制類名（className 屬性）
className 屬性設(shè)置或返回元素的class 屬性。
語法：
object.className = classname
作用:
1.獲取元素的class 屬性
2. 為網(wǎng)頁內(nèi)的某個元素指定一個css樣式來更改該元素的外觀
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className屬性</title>
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使網(wǎng)頁顯示動態(tài)效果并實現(xiàn)與用戶交互功能。</p>
<input type="button" value="添加樣式" onclick="add()"/>
<p id="p2" class="one">JavaScript使網(wǎng)頁顯示動態(tài)效果并實現(xiàn)與用戶交互功能。</p>
<input type="button" value="更改外觀" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className="one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className="two";
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Webpack打包過程中處理ES6模塊的循環(huán)依賴問題小結(jié)
Webpack通過“暫時性引用”特性處理ES6模塊的循環(huán)依賴,即在模塊加載時創(chuàng)建占位符,確保模塊能夠正確加載,本文介紹Webpack打包過程中如何處理ES6模塊的循環(huán)依賴,感興趣的朋友一起看看吧2025-02-02
Bootstrap導(dǎo)航條學(xué)習(xí)使用(二)
這篇文章主要為大家詳細(xì)介紹了Bootstrap導(dǎo)航條的使用方法第二篇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)橫屏手寫簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
微信小程序監(jiān)聽用戶登錄事件的實現(xiàn)方法
這篇文章主要介紹了微信小程序監(jiān)聽用戶登錄事件的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了javascript中使用連等賦值操作帶來的問題的相關(guān)資料,需要的朋友可以參考下2015-11-11
利用原生JavaScript實現(xiàn)造日歷輪子實例代碼
這篇文章主要給大家介紹了關(guān)于如何利用原生JavaScript實現(xiàn)造日歷輪子的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
一個層慢慢增高展開,有種向下滑動的效果...2006-11-11
這篇文章主要介紹了js隨機抽獎代碼效果，大家參考使用2013-12-12
微信小程序?qū)W習(xí)之?dāng)?shù)據(jù)處理詳解
這篇文章主要給大家介紹了關(guān)于微信小程序中數(shù)據(jù)處理的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
JavaScript中使用Object.prototype.toString判斷是否為數(shù)組
這篇文章主要介紹了JavaScript中使用Object.prototype.toString判斷是否是數(shù)組,本文講解了Object.prototype.toString相關(guān)知識,并給出了判斷數(shù)組的實現(xiàn)代碼,使用本文方法同樣可以判斷javascrpty的其它數(shù)據(jù)類型,需要的朋友可以參考下2015-04-04