大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
var style = document.styleSheets[0];
创新互联建站专业为企业提供南京网站建设、南京做网站、南京网站设计、南京网站制作等企业网站建设、网页设计与制作、南京企业网站模板建站服务,十年南京做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
console.log(style)
document.styleSheets这个接口可以获取网页上引入style样式表。
拿到样式表后就可以操作样式啦~
insertRule方法用来给当前样式表插入新的样式规则。
insertRule(rule,index)
rule:要添加到样式表的规则。
index:要把规则插入或附加到 cssRules 数组中的位置。
js既然可以添加 @keyframes 样式了,那动态传值就方便啦!
附实战笔记一篇
两种办法:2级菜单要紧挨着1级菜单,至少有一部分是相连的,这样鼠标沿着相连的部分移动,就不会让2级菜单自动隐藏了;或者在1级菜单的mouseout事件中,不要立刻让2级菜单隐藏,而是延迟一段时间再隐藏,比如 var t = setTimeout("2级菜单.style.display='none'",1000); ,这样的话,只要在1秒内鼠标移到2级菜单上即可,当然,2级菜单的mouseover事件要立刻执行 clearTimeout(t);。特别注意:变量t一定要设为全局的。
1、输入代码,其中button是鼠标要滑动的地方,滑过button时,class为content的内容就要显示出来,鼠标滑出去的时候,这块内容就需要重新隐藏起来。
2、把黑色内容的部分初始状态写成隐藏。只需要在class为content里写上display:none,即可。
3、来看下代码和浏览器中的效果。可以看到黑色内容部分已经不见了。
4、把onmouseover和onmouseout两个事件作用在button上面,再写overShow()和overHide()两个 函数。可以看到在函数中通过改content的display属性来实现显示隐藏的效果。
5、在浏览器中就可以看到效果了。