你从img图片标签赋予它id开始。
然后添加事件处理程序。
加上让图片消失的CSS样式。
通过事件处理程序调用的函数给图片加上一个"hidden"的class,而这个css样式会让图片消失。
当函数被调用执行,它会把"hidden"的class赋予给id为"ugly"的元素,因为图片新加了样式了,然后图片根据新的css样式,就消失了。
有一些注意事项要记住:
之前学过document.getElementById(theElementId).value(主要应用在form表单),和document.getElementById(theElementId).innerHTML(主要用于段落,div标签,还有其他HTML标签),这两个和本章节className都不一样。
它是className,驼峰式写法,而不是class
用这种方式给标签元素赋予class,会把元素之前的class全部替换了。
你也可以在保留原有的class的基础上,再额外新增class。例如你有一个段落,样式是Verdana字体,字体大小是1em,当用户移动鼠标到他上面,你想要把字体大小变为2em,但是你又不想失去原来Verdana字体的样式,即你不想把原有样式替换,你想要保持原有样式,然后添加使字体变大的样式,假设段落元素的id是"pl",下面就是函数。
和之前替换所有样式的代码相比,目前代码有两处小小的不同之处。
是+=,而不是=。
在新添加的样式名前面,需要加一个空格。
本篇的代码习题,可以去下面这个地址练习: http://www.asmarterwaytolearn.com/js/52.html
读书笔记:
blobfish 水滴鱼
yuck. 呸;啐(用以表示厌恶或反感等)
variation 变动,变化
领取专属 10元无门槛券
私享最新 技术干货