使用JavaScript变量内联CSS

我要做到以下几点：使用JavaScript变量内联CSS

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

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

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

其实我是想该div， 当它第一次出现时，通过调用JavaScript函数的方式，通过JavaScript变量或设置内联宽度。

我该怎么做？

来源

2014-01-22 CFHcoder

你为什么要这样做？也许你正在寻找一个模板引擎http://handlebarsjs.com/ – Steve

_“我不想在代码中的其他地方使用”_为什么不呢？ – j08691

如果没有那个你不想使用的JS语句，我恐怕你不能这样做。 – Erlik

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

“如果您需要立即应用样式，您可以在HTML标记之后立即嵌入脚本，然后您将不会看到我想要避免的无格式内容的闪光。 - Harvey A. Ramer”

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

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

用于在页面上设置UI样式属性的'onload'处理程序的问题是 - onload Javascript处理函数可能会增长...并且会随着项目的使用寿命而逐渐增长，最终您是强制清理onload处理程序。最好的方法是不要使用首先设置样式的onload处理函数。

来源

2014-01-24 14:36:51 CFHcoder

你不能这样做。不过，还有其他方法可以实现你想要的。

服务器端处理，特别是如果你使用的技术支持模板。在发送给客户端之前，您可以操作html值;
jQuery可能是要考虑的事情。只需获取元素并使用其API。例如：

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

这一小段代码，不正是你想要的。它不是写在元素本身内部的，它大致相当于你提供的样本，但是再次，如果你以后必须对DOM进行更复杂的操作，那么应该考虑一下。

如果要执行这段代码只有一次，以后的页面已准备就绪，你可以做这样的：

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

来源

2014-01-22 17:53:34 Renan

你为什么建议jQuery？ – MMM

如何设置没有jQuery的元素的宽度？跨浏览器的含义是什么？ – MMM

当DOM完全加载时，使用'ready' ...不是当一个div准备好时（因为如果它没有准备好就不能分配一个事件给它） – MMM

这是不可能做到的，你看到这个的方式。

每次变量发生变化，则需要更新特定对象的样式：

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

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

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

来源

2014-01-22 17:54:23 MMM

http://stackoverflow.com/questions/588040/window-onload-vs-document-onload和是的 – digitalextremist

这是我的经验，FOUC可以发生和避免的一种方式是在页面呈现时使html完整。加载页面时，我希望该div具有window.innerWidth值的宽度。我不能像“** style =”width：100vw“**那样使用”100vw“，即”视口的100％“，因为我发现”vw“表示不一致得到支持。 – CFHcoder

@CFHcoder：这通常应该可以通过简单的CSS来实现，但是如果你真的想在Javascript中做到这一点，只需运行你的代码[当DOM内容加载时]（https://developer.mozilla.org/en- US/docs/Web/Reference/Events/DOMContentLoaded）或一切准备就绪。 – MMM

当元素第一次出现时让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/

来源

2014-01-22 18:22:43 Christophe

使用JavaScript变量内联CSS

回答

相关问题