这是一个简单的例子,先看demo:
源码如下:
鼠标移入改变样式,鼠标移出恢复。
通过修改 oBox.style.cssText 来修改样子。
(注:这里的cssText相当于动态刷新内嵌在html文本上,具有最高优先级,当把 cssText 清空,不会影响 <style></style> 标签或外置 css 文件所设置的样式)
但在 javascript 里使用 cssText 其实是违背样式和行为分离原则的。
更好的办法是用一个 hook ,即利用 javascript 为元素添加 class,而class的样子在 css 文件里设定好。
改进的源码如下:
鼠标移入改变样式,鼠标移出恢复。
作为一个好的web开发者, 一定要把结构、样式、行为分离谨记于心。