Heim > Web-Frontend > js-Tutorial > JavaScript访问样式表代码_javascript技巧

JavaScript访问样式表代码_javascript技巧

WBOY
Freigeben: 2016-05-16 18:18:30
Original
1016 Leute haben es durchsucht

比如:当我们将鼠标移动到一个图标上的时候,图标会出现一些动画效果(渐变放大、闪动、更换颜色等),而这一切的友好效果基本上都跟样式(style)有关,所以这一篇,我学习JavaScript对style的操作。

技术关键点:style。这一篇要求我们对CSS样式有一定的了解。(读者可以google一下CSS的相关内容)

操作步骤:

1、页面代码(包括JS代码)如下:

复制代码 代码如下:




Style Example











JS代码中获得了div对象,并输出了div对象的背景颜色,一切看起来都那么完美,可是效果总是让我们失望,如下:
JavaScript访问样式表代码_javascript技巧
这样看来,JavaScript以这种方式去访问CSS样式无法达到效果,原因:CSS数据并非存储在style属性中,而是存储在类中。所以接下来要做的:就是怎么样去访问CSS类?



2、幸运的是,我们找到了document.styleSheets集合。document.styleSheets包含了html页面中所有样式表的引用和所有的
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage