博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
原生javascript学习:鼠标移入移出改变样式
阅读量:6620 次
发布时间:2019-06-25

本文共 409 字,大约阅读时间需要 1 分钟。

hot3.png

这是一个简单的例子,先看demo:

源码如下:

鼠标移入改变样式,鼠标移出恢复。

通过修改 oBox.style.cssText 来修改样子。

(注:这里的cssText相当于动态刷新内嵌在html文本上,具有最高优先级,当把 cssText 清空,不会影响 <style></style> 标签或外置 css 文件所设置的样式)

但在 javascript 里使用 cssText 其实是违背样式和行为分离原则的。

更好的办法是用一个 hook ,即利用 javascript 为元素添加 class,而class的样子在 css 文件里设定好。

改进的源码如下:

鼠标移入改变样式,鼠标移出恢复。

作为一个好的web开发者,
一定要把结构、样式、行为分离谨记于心。

转载于:https://my.oschina.net/LiyuhaoDev/blog/62792

你可能感兴趣的文章
Ruby-条件判断
查看>>
JavaScript思维导图之<函数基础>
查看>>
Java程序员应该知道的10个eclipse调试技巧
查看>>
Office 2007无法安装,提示“不支持从预发布版的 2007 Microsoft Office system 升级
查看>>
ubuntu下切换GDM, LightDM , KDM
查看>>
linux下Apache安装(转)
查看>>
android socket编程实例
查看>>
从火力发电厂到算法研究员
查看>>
域控制器简易备份还原教程
查看>>
Bash通配符常用字符介绍与使用
查看>>
lcb性能测试常见问题几解决方式
查看>>
观察者模式
查看>>
未来趋势------云计算
查看>>
第一周课程作业(2016.7.31)
查看>>
浅谈HTTP中Get与Post的区别
查看>>
我的友情链接
查看>>
mysql5.623 GTID主从复制+半同步复制安装与配置
查看>>
线程同步
查看>>
可变参数
查看>>
python下载并处理音频
查看>>