使用 JavaScript 将参数添加到 url
Add parameters to url using JavaScript
我想 添加 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 参数应添加到具有 class "parameter" 的所有图像。如果有人可以帮助我,我会很高兴。
如果只有一个元素具有class名称parameter
,使用索引0,
var image = document.getElementsByClassName("parameter")[0];
Document 接口的 getElementsByClassName 方法 returns 具有所有给定 class 名称的所有子元素的类数组对象
getElementsByClassName
returns 一个数组,因此您需要遍历所有元素,或者如果您确定只有一个元素,则可以 select 第一个元素 [0]
在 image
.
之后
如果你想将它应用到所有图像,你可以遍历它们。在下面的示例中,我使用 querySelectorAll
到 select class .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%">
正如其他人所说,getElementsByClassName、return 始终列出。
我想你可以看看 querySelector 方法。
var image = document.querySelector(".parameter");
那么您就不需要查看列表中的第一项。
性能
从性能的角度来看,getElementByClass 会更快。 Performance test
我想 添加 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 参数应添加到具有 class "parameter" 的所有图像。如果有人可以帮助我,我会很高兴。
如果只有一个元素具有class名称parameter
,使用索引0,
var image = document.getElementsByClassName("parameter")[0];
Document 接口的 getElementsByClassName 方法 returns 具有所有给定 class 名称的所有子元素的类数组对象
getElementsByClassName
returns 一个数组,因此您需要遍历所有元素,或者如果您确定只有一个元素,则可以 select 第一个元素 [0]
在 image
.
如果你想将它应用到所有图像,你可以遍历它们。在下面的示例中,我使用 querySelectorAll
到 select class .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%">
正如其他人所说,getElementsByClassName、return 始终列出。 我想你可以看看 querySelector 方法。
var image = document.querySelector(".parameter");
那么您就不需要查看列表中的第一项。
性能 从性能的角度来看,getElementByClass 会更快。 Performance test