JavaScript中的本地定义样式和动画

如何解决JavaScript中的本地定义样式和动画

| 我正在学习JavaScript，在文字中说必须使用本地定义的动画样式。即HTML样式标签。这有意义吗？如果是这样，为什么这是必要的？提前致谢。     

解决方法

不，这不是必需的。 您可以通过两种基本方式进行操作。 动态更改样式：

<p id=\"myElement\">Here is some text to animate</p>
<script>
var pixels = 10; // e.g.,if this were a dynamically changing variable
document.getElementById(\'myElement\').style.width = pixels+\'px\';
</script>

动态更改类：

<style>
.tiny {width:10px}
</style>
<p id=\"myElement\">Here is some text to animate</p>
<script>
document.getElementById(\'myElement\').className = \'tiny\';
</script>

后一种方法可能是更好的做法，因为它使设计人员可以控制CSS中的所有内容，同时让JavaScript程序员仅关注功能。 但是，在转换的情况下，您希望动态更改值（例如，每秒将宽度增加1），沿途为每种可能的宽度定义一个类是不切实际的。但是，您可以查询样式表本身以获取此信息。如果实现了CSS变量，将使此操作更加容易，但是目前，您可以使用https://gist.github.com/990313上的getCSSPropertyValue函数之类的功能来获取样式表中定义的类的开始和结束值，同时处理用style属性转换样式。

var beginWidth = parseInt(getCSSPropertyValue(\'.small\',\'width\'));
var endWidth = parseInt(getCSSPropertyValue(\'.large\',\'width\'));
var itvl = setInterval(function () {
    if (beginWidth++ > endWidth) {
        clearInterval(itvl);
    }
    document.getElementById(\'myElement\').style.width = beginWidth + \'px\';
},10);

    ,他们可能是指在javascript中本地更改样式。为此，您可以利用每个元素的style属性。

element.style.width = \"100px\";

会将样式更改为100px的宽度。这是您使用javascript更改元素外观的方式。     ,也许文本的意思是，当您执行诸如调用jQuery

animate()

函数之类的操作时，例如，传入CSS属性，这些属性是通过HTML元素的

style

属性设置的。这是有道理的，因为您希望这些规则覆盖样式表中的所有预定义规则。 示例：http：//jsfiddle.net/jRKJx/ 如果在动画运行后检查

<div>

，您将看到jQuery在元素上设置了

style

属性。