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>