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。

同时，它可能更容易，更有效（因此您可以添加其他样式）来切换class，而不是专门设置style属性。所以我建议使用：

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

定义CSS类：

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

这样，如果在其他特定浏览器中实现了样式，则可以在此处轻松添加它们。具体来说，使用供应商前缀。

Answer 2

您可能在将元素添加到页面之前执行脚本。

如果您的页面符合以下行：

<!DOCTYPE html>
<html>
<head>
    <script>...</script>
</head>
<body>
    <div id="page">some content</div>
</body>
</html>

然后，在尝试访问onload元素之前，您需要等待文档准备就绪或#page事件。

Javascript getelementbyid不起作用

2 个答案: