DOM(11)——修改样式

1、用JavaScript修改样式有两种方法：一种是className，另一种是style 。

2、易错：修改元素的样式不是设置class属性，而是className属性。案例：网页开关灯的效果。

3、修改元素的样式不能this.style="background-color:Red"。

4、易错：单独修改样式的属性使用“style.属性名”。注意在css中属性名在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为JavaScript中-是不能做属性、类名的。所以：

• CSS中背景颜色是background-color，而JavaScript则是style.backgroundColor；
• 元素样式名是class，在JavaScript中是className属性；
• font-size→style.fontSize；
• margin-top→style.marginTop 等。

5、单独修改控件的样式<input type="button" value="AAA" onclick="this.style.color='red'" />。

技巧：没有文档的情况下的值属性名，随便给一个元素设定id，然后在js中就能id.style.出来能用的属性。

====================================================

案例1：创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus，焦点离开控件的事件是onblur。

案例2：评分控件V1，用一个单行5列的Table做评分控件，监听td的click事件，点击一个td的时候，将这个td及之前的td背景变为红色，之后的td背景变为白色。鼠标在评分控件上的时候显示超链接形式的鼠标图标。

练习1：超链接的单选效果。页面上若干个超链接，点击一个超链接的时候被点击的超链接变为红色背景，其他超链接背景还原为白色。参考：点击变“呜呜”，没有点击变“哈哈”。window.event.returnValue=false;。难点“this” 。

练习2：点击按钮，表格隔行变色：偶数行为黄色背景，奇数行为默认颜色。通过table的getElementsByTagName取得所有的tr，依次遍历，如果是偶数就…………。为什么？防止看串了行。鼠标经过的时候显示灰色。

练习3：放若干文本框，获得焦点的文本框黄色背景，其他控件背景颜色是白色。

• 思路1：监听所有input的onfocus事件→将背景设置为黄色，监听所有input的onblur事件→将背景设置为白色。
• 思路2：只监听onfocus和练习1一样。

练习4：点击ul 中的li，被点击的li高亮显示（背景是黄色），其他li白色背景。监听每个li的onclick事件，将点击的背景设置为黄色，其他的设置为白色背景。

附加：

1、getElementsByTagName 获取某类型的所有标签。如：var tds = table.getElementsByTagName("td");   获取td类型的所有标签。

2、在CSS中，cursor 是鼠标样式。如：tds[i].style.cursor = "pointer";  把鼠标改为小手（pointer）样式。

3、li 行。

4、只用一次的函数，建议写成匿名函数。