JavaScript小练习4-鼠标移入移出改变样式

题目

移出:
在这里插入图片描述
移入:
在这里插入图片描述

分析

思路清晰,onmouseover和onmouseout的使用,注意的地方有:

  1. width和height设置的是content的内容,padding和border要注意设置,实现前后大小相同,就要让整个盒子大小一致,即border也进行设置。
  2. cssText设置内联样式,cssText=""可清空内联样式。
  3. 之前没明白onload的作用,这次理解了,之前onload删去代码依旧正常,是因为script放在body中,body中内容是会执行的,而当script放在head中时,就需要onload让页面加载完成时执行script中的代码。

效果&代码

预览

初学前端,记录学习的内容和进度~
原文地址:https://www.cnblogs.com/xiuhua/p/13398791.html