HTML 属性中的 Javascript 变量答案

【问题标题】：Javascript variables in HTML attributesHTML 属性中的 Javascript 变量
【发布时间】：2014-03-05 19:40:00
【问题描述】：

我知道有很多关于此的帖子，但我找不到具体问题的答案。

我想让一个 JS 变量成为 HTML 属性的值：

<script> var screenWidth = screen.width </script> 

<img src="images/title.png" width="VARIABLE HERE" style="margin-top: 3%"`

"VARIABLE HERE" 是我希望 screenWidth 变量所在的位置。这样做的好处是什么？

【问题讨论】：

【解决方案1】：

在这种情况下，您可以使用 CSS 将宽度设置为 100vw（可能通过样式属性：style="width: 100vw;"。这更有效且更具可读性，但 isn't supported in some old browsers。

【讨论】：

【解决方案2】：

您可以使用 javascript 将样式添加到这样的特定元素。

脚本

document.getElementById('myImg').style.width = screen.width + "px";

HTML

<img id="myImg" src="images/title.png"  style="margin-top: 3%">

这是一个demo

【讨论】：

【解决方案3】：

给标签一个id。

即<img id="xxxx" ...>

然后使用

 document.getElementById('xxx').setAttribute('width', 'somevalue')

或者像其他发帖者所说的那样使用 JQuery

【讨论】：

【解决方案4】：

您不能简单地在 HTML 中调用 JavaScript 变量。您需要使用 JavaScript 或 JQuery 编写它。你可以这样做：-

 <input id="myInput" .../>
 <script>
    var myVar = "value";
    $("#myInput").attr("name", myVar);
 </script>

【讨论】：

【解决方案5】：

这应该可行：

<script>var screenWidth = screen.width;</script> 
...
<img src="images/title.png" onload="this.width=screenWidth;" style="margin-top: 3%">

【讨论】：