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？

规范lists the properties of img elements。是的，height和width都在那里而setting them has the same effect与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}`;

Answer 2

JS中的字符串可以与+运算符链接在一起。数字值将被强制转换为字符串（尽管有时候它会按预期工作）。

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

2 个答案: