声明一个变量并在html中使用它[重复]答案

【问题标题】：Declare a variable and use it in html [duplicate]声明一个变量并在html中使用它[重复]
【发布时间】：2019-08-03 01:26:34
【问题描述】：

我有很大的 html 文档，其中包含各种带有 href 和 src 的图像。

我想声明它们的 href 和 src 以便只更改它们的 var 值。类似...

<script>
var imagehref = www.url.com; 
var imagesrc = www.url.com/img.pg; 
</script>

HTML Part:

<html>
<a href=imagehref><img src=imagesrc /> </a>
</html>

正确的语法/方法是什么？

【问题讨论】：

只改变它们的var值即使你这样做了，改变变量的值也不会改变图像的src
如果你想change image with a variable，请查看

标签： javascript html variables var

【解决方案1】：

给锚标签添加一个标识符，然后使用setAttribute设置href和src

var imagehref = 'www.url.com';
var imagesrc = 'www.url.com/img.pg';

let anchor = document.getElementById('test');
anchor.setAttribute('href', imagehref);
anchor.querySelector('img').setAttribute('src', imagesrc)

&lt;a id='test' href=''&gt;&lt;img src='' /&gt;&lt;/a&gt;

【讨论】：

【解决方案2】：

这种方式不行，要直接从js脚本中设置href和src。这是一个例子：

<html>
  <body>
    <a id="dynamicLink" href=""><img id="dynamicImg" src="" /> </a>
  </body>
  <script>
    var link = document.getElementById('dynamicLink'); 
    link.href = "http://www.url.com"
    var img = document.getElementById('dynamicImg'); 
    img.src = "http://www.url.com/img.png"
  </script>
</html>

【讨论】：

工作。并将其扩展到多个图像...
<body> <a id="movieLink1" href=""><img id="movieImg1" src="" /> </a> <a id="movieLink2" href=""><img id="movieImg2" src="" /> </a> <script> var link = document.getElementById('movieLink1'); link.href = "href1" var img = document.getElementById('movieImg1'); img.src = "imgsrc1" var link = document.getElementById('movieLink2'); link.href = "href2" var img = document.getElementById('movieImg2'); img.src = "imgsrc2" </script> </body>

【解决方案3】：

const imagehref = "https://google.com"; 
const imagesrc = "https://media3.giphy.com/media/sIIhZliB2McAo/giphy.gif"; 

function update(className, property, value) {
  Array.from(document.getElementsByClassName(className)).forEach(elem => (elem[property] = value)) 
}

update("imagehref", "href", imagehref)
update("imagesrc", "src", imagesrc)

<a class="imagehref"><img class="imagesrc" /> </a>
<a class="imagehref"><img class="imagesrc" /> </a>
<a class="imagehref"><img class="imagesrc" /> </a>

【讨论】：