Javascript通過控制類名更改樣式
更新時間：2019年05月24日 14:48:51 作者：沈行的專欄
這篇文章主要介紹了Javascript通過控制類名更改樣式，下面來和小編一起來學習吧
控制類名（className 屬性）
className 屬性設置或返回元素的class 屬性。
語法：
object.className = classname
作用:
1.獲取元素的class 屬性
2. 為網頁內的某個元素指定一個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使網頁顯示動態(tài)效果并實現與用戶交互功能。</p>
<input type="button" value="添加樣式" onclick="add()"/>
<p id="p2" class="one">JavaScript使網頁顯示動態(tài)效果并實現與用戶交互功能。</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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Webpack打包過程中處理ES6模塊的循環(huán)依賴問題小結
Webpack通過“暫時性引用”特性處理ES6模塊的循環(huán)依賴,即在模塊加載時創(chuàng)建占位符,確保模塊能夠正確加載,本文介紹Webpack打包過程中如何處理ES6模塊的循環(huán)依賴,感興趣的朋友一起看看吧2025-02-02
這篇文章主要為大家詳細介紹了Bootstrap導航條的使用方法第二篇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細介紹了微信小程序實現橫屏手寫簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了微信小程序監(jiān)聽用戶登錄事件的實現方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了javascript中使用連等賦值操作帶來的問題的相關資料,需要的朋友可以參考下2015-11-11
這篇文章主要給大家介紹了關于如何利用原生JavaScript實現造日歷輪子的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
一個層慢慢增高展開,有種向下滑動的效果...2006-11-11
這篇文章主要介紹了js隨機抽獎代碼效果，大家參考使用2013-12-12
這篇文章主要給大家介紹了關于微信小程序中數據處理的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
JavaScript中使用Object.prototype.toString判斷是否為數組
這篇文章主要介紹了JavaScript中使用Object.prototype.toString判斷是否是數組,本文講解了Object.prototype.toString相關知識,并給出了判斷數組的實現代碼,使用本文方法同樣可以判斷javascrpty的其它數據類型,需要的朋友可以參考下2015-04-04