通过JavaScript改变Webkit的属性？ [英] Change Webkit properties through Javascript?

问题描述

请帮我，可能是因为我是相当新的CSS动画和Javascript，但我使用的是code，它是假设改变它的属性，当我运行code但这一切与其他在code，除了改变所需的div CSS属性。我试过的这些所有四个和他们都不工作，他们是过时了？是否有这样做还是什么新办法？他们没有在所有的工作。

 的document.getElementById（'播放条'）style.webkitAnimationDuration = 20 +S。
的document.getElementById（'播放栏'）style.animationDuration = 20 +的s。
的document.getElementById（'播放条）风格[' -  WebKit的过渡时间'] ='50年代'。值= Math.floor（（100 /持续时间）* currentTime的）;
的document.getElementById（'播放条）的setAttribute（风格， -  WebKit的过滤器：灰阶（+价值+％））。
 

CSS code

  #playBar {
宽度：1px的;
高度：12px的;
背景：白色;
浮动：左;
-webkit-动画：mymove无限; / *浏览器，Safari浏览器，歌剧* /
-webkit-动画持续时间：10秒; / *浏览器，Safari浏览器，歌剧* /
动画：mymove无限;
动画持续时间：0;
}/ *浏览器，Safari浏览器，歌剧* /
-webkit-关键帧mymove {
从{宽度：0％;}
为{宽度：100％;}
}@keyframes mymove {
从{宽度：0％;}
为{宽度：100％;}
}
 

解决方案

而不是

  this.style [' -  WebKit的过渡时间'] ='50年代
 

使用

  this.style.WebkitTransitionDuration =50年代
 

Please help me, Might be cause I'm fairly new to CSS Animations and Javascript but I am using a code that is suppose to change the properties of it and when I run the code it does everything else with in the code except for change the properties in CSS of the desired div. I've tried all four of these and none of them seem to work, are they out of date? Is there a new way of doing this or what? None of them work at all.

document.getElementById('playBar').style.webkitAnimationDuration = 20 + "s";
document.getElementById('playBar').style.animationDuration = 20 + "s";
document.getElementById('playBar').style['-webkit-transition-duration'] = '50s';

value = Math.floor((100 / duration) * currentTime);
document.getElementById('playBar').setAttribute("style","-webkit-filter:grayscale(" + value + "%)")

CSS CODE

#playBar {
width: 1px;
height: 12px;
background: white;
float:left;
-webkit-animation: mymove infinite; /* Chrome, Safari, Opera */
-webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
animation: mymove infinite;
animation-duration: 0s;
}

/* Chrome, Safari, Opera */
-webkit-keyframes mymove {
from {width: 0%;}
to {width: 100%;}
}

@keyframes mymove {
from {width: 0%;}
to {width: 100%;}
}

解决方案

instead of

this.style['-webkit-transition-duration'] = '50s'

use

this.style.WebkitTransitionDuration="50s"

这篇关于通过JavaScript改变Webkit的属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！