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事件仅适用于一些特定元素，如正文，脚本或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 的正确宽度，渐渐接近inlined-javascript，根据上面的建议之一：

“如果您需要立即应用该样式，您可以在HTML标记之后立即嵌入脚本，然后您将无法获得我想要避免的无格式内容的闪存。 - Harvey A.拉默“

这解决了'慢服务器'=＆gt; FOUC问题。我在 div 标记之后立即添加了一个“脚本”标记，将div设置为window.innerWidth，问题已解决。

从我所看到的，这种方法是使用javascript设置CSS样式属性的最早/最快/最快的方法 - 它避免了编写'onload'处理程序。

用于在页面上设置UI样式属性的'onload'处理程序的问题是 - onload Javascript处理程序函数可以增长...并且增长...并且随着时间的推移在项目的生命周期中增长，并且最终是强制清除onload处理程序。最好的方法是永远不要使用首先设置样式的onload处理程序。

Answer 5

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

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

在内联CSS中使用javascript变量

5 个答案: