使用包含某些查询字符串参数的src创建图像元素

Question

我想创建一个像这样的HTML图像元素:

<img src="www.example.com?param1=aid&param2=sid&param3=user&param4=now" />

我试过这样做:

var now = new Date().getTime();
var aid = 123456;
var sid = 78910;
var user = "abcd";

如何从这些数据创建元素？

Answer 1

您使用创建img 元素(而不是"标记")document.createElement('img').

您src使用该src元素的反射属性设置其字符串.要创建该字符串,现在,您将使用字符串连接(+).但是,请参阅下面的ES6注释.

所以:

var img = document.createElement('img');
img.src = "www.example.com?param1=" + aid +
              "&param2=" + sid +
              "&param3 = " + encodeURIComponent(user) +
              "&param4=" + now;

然后你想把它附加到DOM的某个地方.

请注意encodeURIComponent非数字的.查询字符串中的名称和值都必须是URI编码的.但我没有打扰的param1,param2等等.因为我知道,他们的URI编码版本是...如出一辙.同样地,我知道数字的URI编码版本只是数字.但我看到的user是一个文本值,我认为它并不总是"abcd"如此,所以要防止我对其进行URI编码的问题.

你的评论:

并且假设我想为img元素添加属性,它就像img.height = 1和img.width = 1？

规范列出了img元素的属性.是的,无论是height和width在那里,设置它们具有相同的效果与使用height和width属性,虽然你可能要使用样式表来代替.

并非所有属性都反映了属性.对于那些没有使用的人,你将使用setAttribute("name", value)(如果该值不是一个字符串,则该值将被转换为字符串).

由于JavaScript中,ECMAScript6(ES6)的下一个版本,你可以使用一个模板字符串的src,而不是:

var img = document.createElement('img');
img.src = `www.example.com?param1=${aid}&param2=${sid}&param3=${encodeURIComponent(user)}&param4=${now}`;