经典的javascript函数实例，css的. #区别-优快云博客

本文通过一个简单的示例介绍了如何使用JavaScript实现网页元素的颜色切换及显示隐藏功能。利用`getElementById`获取指定ID的元素，并通过修改其`style`属性实现效果。示例还涉及了CSS中`display`属性的应用。

先贴javascript经典例子代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         div{width: 200px;height: 200px; background: red; margin-bottom: 10px;}
 8         #box2{display: none}
 9     </style>
10     <script type="text/javascript">
11         function jin(){
12             document.getElementById("box1").style.backgroundColor = "blue";
13             document.getElementById("box2").style.display = "block";
14         }
15 
16         function chu(){
17             document.getElementById("box1").style.backgroundColor = "red";
18             document.getElementById("box2").style.display = "none";
19         }
20     </script>
21 </head>
22 <body>
23     <div id="box1" onmouseover="jin()" onmouseout="chu()"></div>
24     <div id="box2"></div>
25 </body>
26 </html>

鼠标移动前效果：

鼠标移动后效果：

代码注释解析：

css中

. 是类，可应用于任何标签，如:class="style1"
#是伪类，只可用于某一个标签，如:id="header"


一般都是用display:none和display:block来控制层的显示，上面代码用

display:none和display:block使box2是否设置为块级元素。

display:block;
是让对象成为块级元素(比如a，span等)

可参考：CSS display 属性

转载于:https://www.cnblogs.com/xiezhidong/p/6025757.html