javascript - Javascript getelementbyid 不起作用

Question

为什么以下不起作用？

javascript:

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

HTML：

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

谢谢

score 7 · Accepted Answer

确保在元素准备好之后调用它，使用类似的东西window.onload或者只是在元素之后的页面上物理地放置脚本......并设置适当的属性：

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

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

我知道设置特殊的“-webkit-filter”样式可能会令人困惑，但是“-webkit-”样式遵循style对象中的约定-没有前导“-”，并用驼峰式替换其他“-”。

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

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

并定义 CSS 类：

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

这样，如果在其他特定浏览器中实现了样式，只需在此处添加它们就很容易了。具体来说，使用供应商前缀。

score 0 · Accepted Answer

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

如果您的页面符合以下要求：

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

然后，您需要等待文档准备好或等待onload事件发生，然后再尝试访问该#page元素。

2 回答 2