Javascript通過控制類名更改樣式

這篇文章主要介紹了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使網頁顯示動態效果並實現與用戶交互功能。</p>
 <input type="button" value="添加樣式" onclick="add()"/>
<p id="p2" class="one">JavaScript使網頁顯示動態效果並實現與用戶交互功能。</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>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章