声明一个变量并在html中使用它[重复]
Posted
技术标签:
【中文标题】声明一个变量并在html中使用它[重复]【英文标题】：Declare a variable and use it in html [duplicate] 【发布时间】：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，请查看 【参考方案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)<a id='test' href=''><img src='' /></a>【讨论】：
【参考方案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>【讨论】：
以上是关于声明一个变量并在html中使用它[重复]的主要内容，如果未能解决你的问题，请参考以下文章