Dom笔记8：Dom修改样式
Dom修改样式初体验：
看一个错误的用法：
正确的用法：
注意，这是易错点：修改元素的样式不是设置 class 属性，而是 className 属性。
案例：网页开关灯的效果。
除了可以整体修改一个元素的class以外，还可以单独修改样式的属性，可以使用 “ style. 属性名 ” 。
注意：
易错：在 css 中属性名在 JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有 “-” 的属性，因为JavaScript 中，“-”代表减号，“ - ”是不能做属性、类名的。
修改元素的样式不能 this. style="background-color:Red" 。
所以 CSS 中背景颜色是 background-color，而 JavaScript 则是 style.background ；元素样式名是 class ，在 JavaScript 中是className 属性； font-size → style.fontSize ； margin-top → style.marginTop
单独修改控件的样式 <input type="button" value="AAA" onclick="this.style.color='red'" /> 。技巧，没有文档的情况下的值属性名，随便给一个元素设定 id ，然后在 js 中就能 id.style. 出来能用的属性。
案例 ：创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。
提示：焦点进入控件的事件是onfocus ，焦点离开控件的事件是 onblur 。
知识点：失去焦点事件onblur 和得到焦点的事件onfocus ：
看一个错误的用法：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<style type="text/css">
.day
{
background-color:Green;
}
.night
{
background-color:Black;
}
</style>
</head>
<body>
<div id="divTest" class="day">
<font color="yellow">我们的祖国像花园是东方会计师的肌肤sdk罚金撒地方可是觉得飞地方</font>
</div>
<input id="Button1" type="button" value="修改颜色" onclick="document.getElementById('divTest').class='night'"; />//用class是错误的
</body>
</html>点击按钮，没有反应，修改不了颜色。
正确的用法：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<style type="text/css">
.day
{
background-color:Green;
}
.night
{
background-color:Black;
}
</style>
</head>
<body>
<div id="divTest" class="day">
<font color="yellow">我们的祖国像花园是东方会计师的肌肤sdk罚金撒地方可是觉得飞地方</font>
</div>
<input id="Button1" type="button" value="修改颜色" onclick="document.getElementById('divTest').className='night'"; />//是className而不是class
</body>
</html>
注意，这是易错点：修改元素的样式不是设置 class 属性，而是 className 属性。
案例：网页开关灯的效果。
<html xmlns="http://www.w3.org/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=document.getElementById("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 id="btnSwitch" type="button" value="开灯" onclick="switchLight()"; />
</body>
</html>
除了可以整体修改一个元素的class以外，还可以单独修改样式的属性，可以使用 “ style. 属性名 ” 。
<input id="Button1" type="button" value="修改" onclick="this.style.background='Red'"; />
注意：
易错：在 css 中属性名在 JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有 “-” 的属性，因为JavaScript 中，“-”代表减号，“ - ”是不能做属性、类名的。
修改元素的样式不能 this. style="background-color:Red" 。
所以 CSS 中背景颜色是 background-color，而 JavaScript 则是 style.background ；元素样式名是 class ，在 JavaScript 中是className 属性； font-size → style.fontSize ； margin-top → style.marginTop
单独修改控件的样式 <input type="button" value="AAA" onclick="this.style.color='red'" /> 。技巧，没有文档的情况下的值属性名，随便给一个元素设定 id ，然后在 js 中就能 id.style. 出来能用的属性。
案例 ：创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。
提示：焦点进入控件的事件是onfocus ，焦点离开控件的事件是 onblur 。
知识点：失去焦点事件onblur 和得到焦点的事件onfocus ：
<input id="Text1" type="text" onblur="alert('第一个文本框失去焦点')"/>
<input id="Text2" type="text" onfocus="alert('第二个文本框得到焦点')" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script type="text/javascript">
function initEvent()
{
var inputs=document.getElementsByTagName("input");
//遍历所以input控件，添加onblur响应函数
for(var i=0;i<inputs.length;i++)
{
var input=inputs[i];
input.onblur=inputOnblur;//注意：为input控件的onblur事件绑定inputOnblur响应函数，而不是调用某个函数
}
//失去焦点时候进行数据检查
function inputOnblur()
{
//inputOnblur是onblur的响应函数，而不是被响应函数调用的函数，所以可以用this来取得发生事件控件的对象
if(this.value.length<=0)//检查文本框中文字长度，如果<=0，则文本框为空
{
this.style.background="red";
}
else
{
this.style.background="white";
}
}
}
</script>
</head>
<body onload="initEvent()">
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />
<input id="Text4" type="text" />
<input id="Text5" type="text" />
</body>
</html>