经典的javascript函数实例，css的. #区别
先贴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 属性
分类:
脚本语言
标签:
javascript
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决