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

我想创建这样一个一个HTML图像元素：创建包含某些查询的字符串src图像元素参数

<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";

如何创建来自这些数据的元素？

来源

2015-06-21 Doug Fir

您使用document.createElement('img')创建了一个img元素（而不是“tag”）。

您使用该元素的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.height = 1和img.width = 1 img元素？

该规范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}`;

来源

2015-06-21 16:32:26

对模板字符串也很了解。这就是JS没有图书馆或任何东西？太棒了。 –

@DougFirr：是的，一旦所有人都升级了他们的浏览器，那么〜2021左右。 :-)与此同时，像[Babel]（http://babeljs.io）这样的译员已经支持它。 [实施例]（https://babeljs.io/repl/#？实验=假评估=真松散=假规格=假游乐场=假代码=让％20A％20％3D％20％22AY％22％2C％20B％20％3D％20％22bee％22％3B％0Alet％20S％20％3D％ 20％60A％20％3D％20％24％7BA％7D％2C％20B％20％3D％20％24％7BB％7D％2C％20B％20upper％20％3D％20％24％7Bb.toUpperCase（）％7D％60％3B％0Aconsole.log（S）％3B） –

字符串在JS可以链接在一起与+运营商。数字值将被强制转换为字符串（尽管有时无法按预期工作）。

来源

2015-06-21 16:33:33 reg4in

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

回答

相关问题