js里写入css,js样式的写入与清除，cssText的疑问

这是CSS3动画本身的问题。还有reflow与否的问题。

简单来说，当有使浏览器reflow的操作的时候，动画会被重置，这时就能重复运行，但单单是repaint不行。而修改一个类的动画效果应该是能引起浏览器的reflow的，但是由于chrome等浏览器的优化，在同一个函数块里对同一个元素的cssText进行修改，它会把所有累加再在最后进行修改。而IE则是每一次修改都会。

所以当你在chrome里设断点单步运行时，o_bar.style.cssText="";这句不会起作用。所以你加了延时后又起作用了。

W3C's opition里有句这样的描述。

In order to restart an animation, it must be removed then reapplied.

就是对于这个描述，除了加延时之外还可以用修改元素的宽度、用两个不同名但同样的动画相互替换等方法来达到目的，简单来说就是要引起浏览器的reflow。

还有几点很有意思，对于css动画，它运行结束并不会自动的赋予pause状态，仍旧是running状态。

更多的你可以google一下，关键字是 restart css animation。

js里写入css,js样式的写入与清除，cssText的疑问相关推荐

web静态资源访问规则||webjars的访问配置——webjars是maven库里面对css js image打的一个jar包
Html css js image txt web项目中放在 Webapp 在springboot项目中静态资源放置的位置 Springboot默认的静态资源目录 (1)在src/main ...
html及js试题,HTML+css+js试题..docx
HTMLcssjs试题. HTML+CSS+JS面试题一.单项选择(165题)1.HTML是什么意思?A)高级文本语言B)超文本标记语言C)扩展标记语言D)图形化标记语言2.浏览器针对于HTML文档起 ...
html中各种js效果图,HTML+CSS+JS制作一个漂亮的橙子动态时钟
HTML+CSS+JS制作一个漂亮的橙子动态时钟 1. 效果图: 2. 背景产生: 利用四块与圆同高的矩形转一定的角度将圆切分成八块形成橙子内里,利用径向渐变形成橙皮. background: rad ...
js调用html5cookie,CSS+JS+Cookie实现页脚固定广告展示
经常看到有些网站为了吸引用户注意,在页面底部放置固定横幅广告,用户滚动页面时,横幅广告一直固定在页底,并不随页面滚动而滚动,当然一般允许用户可以关闭广告条,并设置一定时间内不再显示此广告条.本文将介绍 ...
JS获取元素CSS样式
获取元素CSS样式的方法说到在js里修改css样式的属性,我第一个想的是.style属性.然后去具体的修改字体的样式,背景颜色等样式,最近在做一个练习的时候涉及到了这部分的知识. 一·首先style ...
js动态改变css样式
动态改变页面元素样式: 使用getElement系列方法访问元素. 改变样式属性:style属性:className属性. <!DOCTYPE html> <html>< ...
Springsecurity引入静态资源 css,js，图片被屏蔽等问题解决办法
如果不加解决,springsecurity会自动屏蔽我们引用的css,js等静态资源,导致页面不能加载出该有的样式功能. 应在继承了WebSecurityConfigurerAdapter类中的con ...
JS如何调用CSS样式表
2019独角兽企业重金招聘Python工程师标准>>> JS1: head=document.getElementsByTagName("head"); func ...
原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式发布时间:2020-08-30 01:46:17 来源:脚本之家阅读:148 作者:外婆的彭湖湾下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...

js里写入css,js样式的写入与清除，cssText的疑问

js里写入css,js样式的写入与清除，cssText的疑问相关推荐

最新文章

热门文章