創建包含某些查詢的字符串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圖像元素參數

回答

相關問題