使用 JS 如何更改 HTML 标签属性（替代 document.write() ）答案

【问题标题】：Using JS how to change HTML tag attributes (alternative to document.write() )使用 JS 如何更改 HTML 标签属性（替代 document.write() ）
【发布时间】：2016-02-10 06:35:39
【问题描述】：

我正在使用一个外部 API，它允许我在图像src 值内发送额外参数，就像这样

<img src="myImage.jpg?resize=width[scrW]">

问题是我不知道宽度变量（scrW）是什么，直到我开始加载页面。我使用<script> var scrW = window.innerHtml </script> 来获得我需要的宽度。

我尝试过使用

<script> 
    document.write('<img src="myImage.jpg?resize=width['+window.innerHtml+']">')
</script>

但问题在于document.write 以文本形式显示所有内容，直到文档准备好（或到达</body>）。这看起来很俗气。

我的问题是：如何在页面呈现期间将 JS 变量附加/前置到 src 属性值？

【问题讨论】：

标签： javascript html css tags

【解决方案1】：

解决在页面呈现之前显示文本的问题怎么样？这很容易。只需确保您的代码在页面的 HTML 完全加载之前不会运行。

Vanilla JS solution:

<script>
// self executing function here
(function() {
   // your page initialization code here
   // the DOM will be available here
   document.write('<img src="myImage.jpg?resize=width['+window.innerHtml+']">');
})();
</script>

使用 jQuery：

<script>
$(document).ready(function() {
  document.write('<img src="myImage.jpg?resize=width['+window.innerHtml+']">');
});
</script>

【讨论】：

我确实必须将我的 API 类放在 document.write 之后，但它可以工作 :)

【解决方案2】：

你如何给你的图像 src 一些默认的调整大小值，当页面加载时它会被更新。我为 img 提供了一个“myImage”的 ID，以便我可以在 JavaScript 代码中访问它。

这是 HTML：

<img id="myImage" src="myImage.jpg?resize=width[180]">

在末尾插入此 JavaScript：

<script>var scrW = window.innerHTML;
document.getElementById("myImage").src = "myImage.jpg?resize=width["+scrW+"]";</script>

【讨论】：