使用JavaScript向網址添加參數

Question

我想將url參數添加到我的img src ，可以使用getElementById來做到這一點，但是不能使用getElementsByClassName來做到。 我更喜歡使用getElementsByClassName ，因為這樣做對我來說更有意義。 這是我正在使用的代碼：

<img id="parameter" src="http://url-to-image.com/image.jpg" style="width: 100%">

<script>
var image = document.getElementById("parameter");
var imageSrc = image.getAttribute("src");
image.setAttribute("src", imageSrc + "?w=" + viewportWidth + "&h=" + viewportHeight + "&dpr=" + dpr + "&fit=crop");
</script>

上面的代碼很好用，但是使用

<img class="parameter" src="http://url-to-image.com/image.jpg" style="width: 100%">

<script>
var image = document.getElementsByClassName("parameter");
var imageSrc = image.getAttribute("src");
image.setAttribute("src", imageSrc + "?w=" + viewportWidth + "&h=" + viewportHeight + "&dpr=" + dpr + "&fit=crop");
</script>

不會向img src添加任何內容。 url參數應添加到所有帶有“ parameter”類的圖像。 如果有人可以幫助我，我會很高興。

Answer 1

就像其他人所說的， getElementsByClassName總是返回列表。 我認為您可以改為查看querySelector方法。

var image = document.querySelector(".parameter");

那么您無需查看列表中的第一項。

表現在性能的角度來看，getElementByClass會更快。 性能測試

Answer 2

如果只有一個具有類名稱parameter元素，則將其與索引0一起使用，

var image = document.getElementsByClassName("parameter")[0];

Document接口的getElementsByClassName方法返回具有所有給定類名稱的所有子元素的類似數組的對象

Answer 3

getElementsByClassName返回一個數組，因此您需要遍歷所有元素，或者如果確定只有一個元素，則可以在image之后選擇第一個元素，其[0] 。

如果要將其應用於所有圖像，則可以在它們上循環播放。 在以下示例中，我使用querySelectorAll選擇類.parameter 。

 const viewportWidth = '100px'; const viewportHeight = '100px'; const dpr = 2; const images = document.querySelectorAll(".parameter"); images.forEach( ( image ) => { const imageSrc = image.getAttribute("src"); image.setAttribute("src", imageSrc + "?w=" + viewportWidth + "&h=" + viewportHeight + "&dpr=" + dpr + "&fit=crop"); } ); 

 <img class="parameter" src="http://url-to-image.com/image.jpg" style="width: 100%">