HTML设置<img height=""/>等于JS变量

时间:2016-06-02 15:44:07

标签: javascript html image

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

该值在SizeVal标记中存储为<script>,我希望能够将此变量用作图像的宽度/高度

我可以使用它来创建反映以下含义的内容:

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

谢谢!

1 个答案:

答案 0 :(得分:0)

您可以在设置值后使用函数修改图像大小,例如:

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);
  });
})();

示例here

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

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