Javascript getelementbyid不起作用

Question

为什么以下不起作用？

JavaScript的:

document.getElementById("page").style = "-webkit-filter: blur(5px);";

HTML:

<div id="page" style="" >some content</div>

谢谢

Answer 1

确保在元素准备好之后调用它,使用类似的东西window.onload或者只是在元素之后的页面上实际使用脚本...并设置适当的属性:

window.onload = function () {
    document.getElementById("page").style.webkitFilter = "blur(5px)";
};

style元素的属性是具有您需要设置的属性的对象.您不应该也不能将该style属性设置为字符串.我SyntaxError: invalid label尝试时遇到错误.

我知道设置特殊的"-webkit-filter"样式可能会让人感到困惑,但"-webkit-"样式遵循style对象中的约定- 没有前导" - ",并用camelCase替换其他" - ".

同时,它可能更容易和更有效(因此您可以添加其他样式)来切换a class,而不是专门设置style属性.所以我建议使用:

document.getElementById("page").className += " transformer";

并定义CSS类:

.transformer {
    -webkit-filter: blur(5px);
}

这样,如果在其他特定浏览器中实现了样式,则可以很容易地在此处添加它们.具体来说,使用供应商前缀.