使用JavaScript向网址添加参数

时间:2019-03-07 15:10:27

标签: javascript getelementbyid url-parameters getelementsbyclassname

我想向我的img src添加url参数,可以使用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”类的图像。如果有人可以帮助我,我会很高兴。

3 个答案:

答案 0 :(得分:4)

正如其他人所说,getElementsByClassName,总是返回列表。 我认为您可以改用querySelector方法。

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

然后,您无需查看列表中的第一项。

性能 从性能角度来看,getElementByClass会更快。 Performance test

答案 1 :(得分:1)

如果只有一个元素的类名称为parameter,则将其与索引0一起使用,

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

Document接口的getElementsByClassName方法返回具有所有给定类名的所有子元素的类似数组的对象

答案 2 :(得分:1)

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