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="lor='red'" />
1.举例1
<html xmlns="/1999/xhtml">
<head>
<title>动态修改style</title>
<style type="text/css">
.day
{
background-color:Green;
}javascript动态效果
.night
{
background-color:Black;
}
</style>
<script type="text/javascript">
function dayclick() {
var divMain = ElementById("divMain");
//注意这⾥使⽤的是className⽽不是class
divMain.className = "day";
}
function nightclick() {
var divMain = ElementById("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>
2. ⽰例：动态修改style(模拟开灯，关灯)
<html xmlns="/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.day
{
background-color:White;
}
.night
{
background-color:Black;
}
</style>
<script type="text/javascript">
function switchLight() {
var btnSwitch = ElementById("btnSwitch");
if (document.body.className == "day") {
document.body.className = "night";
btnSwitch.value = "开灯";
}
else {
document.body.className = "day";
btnSwitch.value = "关灯";
}
}
</script>
</head>
<body class="night">
<input type="button" value="开灯" id="btnSwitch" onclick="switchLight()"/> </body>
</html>
3. ⽰例：
<html xmlns="/1999/xhtml">
<head>
<title>动态设置style练习(修改⽂本框背景⾊)</title>
<script type="text/javascript">
function IniEvents() {
var inputs = ElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "text") {
//设置txtOnBlur函数为input元素的onblur事件的响应函数
inputs[i].onblur = txtOnBlur;
}
}
}
function txtOnBlur() {
/*
txtOnBlur是onblur的响应函数，⽽不是被响应函数调⽤
的函数，所有可以⽤this来取的发⽣事件控件的对象
*/
if (this.value.length <= 0) {
this.style.background = "red";
}
else {
this.style.background = "white";
}
}
</script>
</head>
<body onload="IniEvents()">
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
</body>
</html>
希望本⽂所述对⼤家的javascript程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。