HTML 设置<img 高度>等于 JS 变量

Question

我正在开发一个主要使用javascript的sharepoint应用程序。我让用户能够选择设置一个变量，我试图将其用作屏幕上图像的宽度。

该值SizeVal存储在同一个<script>标签中，我希望能够将此变量用作图像的宽度/高度

我可以用它来创建反映以下内容含义的东西吗：

<img src="example.png" width=SizeVal height=SizeVal>

谢谢！

Answer 1

设置值后，您可以使用函数修改图像大小，例如：

.html

<input type="text" id="myInp" />
<img id="myImg" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" width="0px" height="0px">

.js

(function() {
  document.getElementById("myInp").addEventListener("change", function() {
    document.getElementById('myImg').setAttribute('width', this.value);
    document.getElementById('myImg').setAttribute('height', this.value);
  });
})();

这里的例子

或者你可以使用像AngularJS或 https://mustache.github.io/这样的框架来做这样的事情。

<img src="example.png" width="{{SizeVal}}" height="{{SizeVal}}">