我想将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参数应添加到具有“参数”类的所有图像中。如果有人能帮助我,我会很高兴的。
getElementsByClassName
返回一个数组,所以你需要遍历所有元素,或者如果你确定只有一个元素,你可以在[0]
之后用image
选择第一个元素。
如果要将其应用于所有图像,可以循环它们。在下面的例子中,我使用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%">
正如其他人所说,getElementsByClassName,总是返回名单。我想你可以看一下querySelector方法。
var image = document.querySelector(".parameter");
那么你不需要查看列表中的第一项。
从性能角度来看,getElementByClass会更快。 Performance test
如果只有一个类名为parameter
的元素,请将其与索引0一起使用,
var image = document.getElementsByClassName("parameter")[0];
Document接口的getElementsByClassName方法返回具有所有给定类名的所有子元素的类数组对象