在内联 CSS 中使用 javascript 变量

Question

我想做以下事情：

<div id="theDiv" style="width: aJavascriptVariableOrFunctionCallToGetValue">TESING</div>

我不想在代码的其他地方使用，

document.getElementById('theDiv').style.width = someValue;

我实际上希望该 div在第一次出现时通过 JavaScript 变量或通过调用 JavaScript 函数来设置内联宽度。

我怎样才能做到这一点？

Answer 1

这是不可能做到的。

每次变量更改时，您都需要更新该特定对象的样式：

var theDiv = document.getElementById("theDiv");
document.getElementById('theDiv').style.width = someValue;

我真的不明白你的意思是，当它第一次出现时，你希望它的宽度设置为一定的宽度 - 你为什么要内联？ 为什么不能在 Javascript 中设置宽度？ 是什么阻止你这样做？ 特别是如果您只想做一次并且不想动态更改它。

如果要将div的宽度链接到变量，请查看 Backbone 或 EmberJS 等框架。 然后你可以定义一个渲染器，当变量改变时改变宽度。

Answer 2

你不能那样做。 但是，还有其他方法可以实现您想要的目标。

• 服务器端处理，特别是如果您使用的技术支持模板。 您可以在将 html 值发送给客户端之前对其进行操作；

• jQuery可能需要考虑。 只需获取元素并使用其 API。 例子：

$("#theDiv").width(aJavascriptVariableOrFunctionCallToGetValue);

这一小段代码正是你想要的。 它没有写在元素本身内部，它与您提供的示例大致相同，但同样，如果您稍后必须对 DOM 执行更复杂的操作，则需要考虑这一点。

如果你只想执行那段代码一次，并且在页面准备好后，你可以这样做：

var div = $("#theDiv");
div.ready(function () {
    div.width(aJavascriptVariableOrFunctionCallToGetValue);
});

Answer 3

让 JavaScript 在元素第一次出现时运行的唯一方法是使用 onload 事件处理程序。 并且 onload 事件仅适用于少数特定元素，例如 body、script 或 img。

以下是使用 img 标签使其在您的情况下工作的方法：

<div id="theDiv">
TESING
<img style="display:none;" src="tinyImage.jpg" onload="this.parentNode.style.width='100px';"/>
</div>

老实说，我不认为这是一个好的做法，我建议耐心等待，稍后在脚本中设置宽度。

现场演示： http : //jsfiddle.net/HKW6b/

Answer 4

此问题的解决方案让我立即设置div的适当的宽度，趋近内联的JavaScript，尽可能按照上述建议的意见之一：

“如果您需要立即应用样式，您可以在 HTML 标记之后立即嵌入脚本，这样您就不会出现我猜您想避免的无样式内容的闪光。 – Harvey A. Ramer”

这解决了“服务器慢”=> FOUC 问题。 我在div标签后立即添加了一个 'script' 标签，将div设置为 window.innerWidth，问题解决了。

据我所知，这种方法是使用 javascript 设置 CSS 样式属性的最早/最快/最快的方法——并且它避免了必须编写“onload”处理程序的代码。

用于在页面上设置 UI 样式属性的“onload”处理程序的问题是——onload Javascript 处理程序函数可以增长……并且增长……并且在项目的生命周期内随着时间的推移而增长，最终您将被迫清理出 onload 处理程序。 最好的方法是永远不要使用首先设置样式的 onload 处理程序。

Answer 5

我正在使用 React，这个语法对我有用：

 <div id="theDiv" style={`width: ${aJavascriptVariable} %`}>TESING'</div>