Javascript通過(guò)控制類名更改樣式
更新時(shí)間：2019年05月24日 14:48:51 作者：沈行的專欄
這篇文章主要介紹了Javascript通過(guò)控制類名更改樣式，下面來(lái)和小編一起來(lái)學(xué)習(xí)吧
控制類名（className 屬性）
className 屬性設(shè)置或返回元素的class 屬性。
語(yǔ)法：
object.className = classname
作用:
1.獲取元素的class 屬性
2. 為網(wǎng)頁(yè)內(nèi)的某個(gè)元素指定一個(gè)css樣式來(lái)更改該元素的外觀
<!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)頁(yè)顯示動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶交互功能。</p>
<input type="button" value="添加樣式" onclick="add()"/>
<p id="p2" class="one">JavaScript使網(wǎng)頁(yè)顯示動(dòng)態(tài)效果并實(shí)現(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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了在微信小程序中渲染HTML內(nèi)容的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章詳細(xì)介紹了js兼容的placeholder屬性，有需要的朋友可以參考一下2013-08-08
Javascript?Object對(duì)象類型使用詳解
面向?qū)ο缶幊?Object?Oriented?Programming)將現(xiàn)實(shí)世界中的復(fù)雜關(guān)系抽象成一個(gè)個(gè)對(duì)象,通過(guò)對(duì)象之間的分工合作對(duì)現(xiàn)實(shí)世界進(jìn)行模擬，這篇文章主要介紹了Javascript?Object對(duì)象類型使用詳解2022-10-10
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片緩慢放大縮小效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了JavaScript中定義類的方式,結(jié)合實(shí)例形式分析了JavaScript實(shí)現(xiàn)面向?qū)ο箢惖亩x及使用相關(guān)技巧,并附帶了四種JavaScript類的定義方式,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細(xì)介紹了bootstrap手風(fēng)琴的制作方法，制作聲明式觸發(fā)手風(fēng)琴，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
JavaScript實(shí)現(xiàn)伸縮二級(jí)菜單
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)伸縮二級(jí)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了JS對(duì)日期操作封裝代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
JS根據(jù)年月獲得當(dāng)月天數(shù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS根據(jù)年月獲得當(dāng)月天數(shù)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-07-07
純JavaScript模仿微信打飛機(jī)游戲，做網(wǎng)頁(yè)小游戲的借鑒下，界面設(shè)計(jì)是豎長(zhǎng)形仿手機(jī)屏幕風(fēng)格，游戲效果流暢，通過(guò)本篇文章給大家分享純js如何實(shí)現(xiàn)模仿微信打飛機(jī)小游戲，需要的朋友可以參考下2015-08-08