Добавьте параметры в URL, используя JavaScript - PullRequest
Новая
       55

Добавьте параметры в URL, используя JavaScript

0 голосов
/ 07 марта 2019

Я бы хотел добавить параметр 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 должен быть добавлен ко всем изображениям с классом «параметр».Был бы рад, если бы кто-то мог помочь мне в этом.

Ответы [ 3 ]

5 голосов
/ 07 марта 2019

Как говорили другие парни, getElementsByClassName , возвращайте список всегда.Я думаю, что вы можете взглянуть на метод querySelector . 

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

, тогда вам не нужно смотреть на первый элемент в списке.

Производительность с точки зрения производительности getElementByClass будет быстрее. Тест производительности

1 голос
/ 07 марта 2019

getElementsByClassName возвращает массив, поэтому вам нужно либо зациклить все элементы, либо, если вы уверены, что у вас только один элемент, вы можете выбрать первый элемент с помощью [0] после image.

* 1005.* Если вы хотите применить его ко всем изображениям, вы можете зациклить их.В следующем примере я использую 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%">
1 голос
/ 07 марта 2019

Если существует только один элемент с именем класса parameter, используйте его с индексом 0, 

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

Метод getElementsByClassName интерфейса Document возвращает массивоподобный объектвсе дочерние элементы, которые имеют все заданные имена классов

...