时间戳

首页 > 解决方案 > 使用不同方式使用 JavaScript 设置 HTML 元素样式的成本/收益

javascript - 使用不同方式使用 JavaScript 设置 HTML 元素样式的成本/收益

问题描述

我最近在 IntelliJ 中打开了我的一个 Web 项目，并注意到我的 JavaScript 中有一些 Netbeans 没有显示的提示/错误。

错误是：

> Assigned expression type string is not assignable to type CSSStyleDeclaration

这是它显示的行：

password.style = "border: 2px solid red";

虽然我通过直接声明我的风格来抑制提示，如下所示：

password.style.border = "2px solid red";

正如评论中提到的那样，这是另一种方式：

password.setAttribute("style", "border: 2px solid red";);

我的问题是这三个有什么区别？使用第一种方式是否有任何后果/风险？有最佳实践吗？

据我所知，第一种方法适用于我测试过的浏览器。此外，Netbeans 不会将此显示为问题/提示似乎很奇怪。

标签： javascripthtmlcss

解决方案

根据mdn，HTMLElement.style应该被视为只读而不用于设置样式属性字符串；相反，它是 a CSSStyleDeclaration，正如 IntelliJ 已告知您的那样。

如果您不喜欢将样式指定为字符串，则可以使用例如element.style.cssText = 'border: 2px solid red'.

编辑：为了进一步缩小您的问题的答案，结果是您不再有权访问 CSSStyleDeclaration 对象，并且由于它是一种不受支持的设置样式的方法，您可能会面临结果不一致或代码损坏的风险。

推荐阅读