javascript動態設置樣式style實例分析

2024-05-06 16:20:07

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了javascript動態設置樣式style的方法,實例分析了javascript操作style樣式的易錯點和相關使用技巧,需要的朋友可以參考下

本文實例講述了javascript動態設置樣式style的方法。分享給大家供大家參考。具體分析如下：

動態修改style

1.易錯:修改元素的樣式不是設置class屬性，而是className屬性.
2.易錯:單獨修改樣式的屬性使用"style.屬性名".注意在css中屬性名在javascript中

操作的時候屬性名可能不一樣，主要集中在那些屬性名中含有-的屬性，因為

javascript中-是不能做屬性，類名的。所以在CSS中背景色是background-clolor,而javascript中則是style.background;元素樣式名是class，在javascript中是className屬性;font-size->style.fontSize;margin-top->style.marginTop

3.單獨修改控件的樣式<input type="button" value="AAA" onclick="this.style.color='red'" />

1.舉例1

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>動態修改style</title>

<style type="text/css">

.day

{

background-color:Green;

}

.night

{

background-color:Black;

}

</style>

<script type="text/javascript">

function dayclick() {

var divMain = document.getElementById("divMain");

//注意這里使用的是className而不是class

divMain.className = "day";

}

function nightclick() {

var divMain = document.getElementById("divMain");

divMain.className = "night";

}

</script>

</head>

<body>

<div id="divMain" class="day">

<font color="red">中華人名共和國</font>

</div>

<input type="button" value="白天" onclick="dayclick()" />

<input type="button" value="黑夜" onclick="nightclick()" />

</body>

</html>