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)文章
這篇文章主要介紹了在微信小程序中渲染HTML內(nèi)容的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章詳細介紹了js兼容的placeholder屬性，有需要的朋友可以參考一下2013-08-08
面向?qū)ο缶幊?Object?Oriented?Programming)將現(xiàn)實世界中的復(fù)雜關(guān)系抽象成一個個對象,通過對象之間的分工合作對現(xiàn)實世界進行模擬，這篇文章主要介紹了Javascript?Object對象類型使用詳解2022-10-10
這篇文章主要為大家詳細介紹了js實現(xiàn)圖片緩慢放大縮小效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了JavaScript中定義類的方式,結(jié)合實例形式分析了JavaScript實現(xiàn)面向?qū)ο箢惖亩x及使用相關(guān)技巧,并附帶了四種JavaScript類的定義方式,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細介紹了bootstrap手風(fēng)琴的制作方法，制作聲明式觸發(fā)手風(fēng)琴，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)伸縮二級菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了JS對日期操作封裝代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
JS根據(jù)年月獲得當(dāng)月天數(shù)的實現(xiàn)代碼
這篇文章主要介紹了JS根據(jù)年月獲得當(dāng)月天數(shù)的實現(xiàn)代碼,需要的朋友可以參考下2014-07-07
純JavaScript模仿微信打飛機游戲，做網(wǎng)頁小游戲的借鑒下，界面設(shè)計是豎長形仿手機屏幕風(fēng)格，游戲效果流暢，通過本篇文章給大家分享純js如何實現(xiàn)模仿微信打飛機小游戲，需要的朋友可以參考下2015-08-08