Заменить значение стиля в javascript
Я хочу изменить значение в теге с помощью js.
<div class = "class1" style = "background-image:url(https://www.awebsite.com/sites/default/files/a_image.jpg?t=1529620960)"></div>
Я хочу это изменить:
https://www.awebsite.com/sites/default/files/a_image.jpg?t=1529620960`
к этому:
https://hello.com/an-other-image.jpg
Спасибо !
и ваша попытка ...
Возможный дубликат как изменить фоновое изображение div с помощью javascript?
document.getElementById (id) .style.property = новый стиль
Похоже, вы хотите, чтобы мы написали для вас код. Хотя многие пользователи готовы написать код для кодировщика, терпящего бедствие, они обычно помогают только тогда, когда автор уже попытался решить проблему самостоятельно. Хороший способ продемонстрировать эти усилия - включить код, который вы написали до сих пор, пример ввода (если есть), ожидаемый вывод и вывод, который вы действительно получаете (вывод консоли, трассировки и т. д.). Чем больше подробностей вы предоставите, тем больше ответов вы, вероятно, получите. Проверьте часто задаваемые вопросы и Как спросить.
Во-первых, извините за мой плохой английский, трудно полностью объяснить, чем я хочу заниматься. Я тестировал некоторые коды, пытался их редактировать, но я очень плохо разбираюсь в JS, это было только для пользовательского скрипта. Спасибо за ответы и извините за непонятность
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете сделать что-то вроде:
c = document.getElementsByClassName('class1');
for(i = 0; i < c.length; i++){
c[i].style.backgroundImage = 'url(https://hello.com/an-other-image.jpg)';
}
Я согласен с этим решением. Я просто протестировал его, и он у меня сработал.
Это работает, но отсутствуют var или let для объявлений переменных. forEach также широко поддерживается и устраняет утомительность индексной переменной. На самом деле el.style.backgroundImage в любом случае является основной частью, но, к сожалению, это может быть полезно :)
Вы можете использовать document.querySelector, чтобы получить ссылку на элемент <div>, а затем обновить его атрибуты стиля.
// querySelector can use CSS selectors to find the element in the document
// note: this is assuming there is only 1 element on page with this class
var myDiv = document.querySelector('.class1');
// Style properties generally match CSS but camel cased
myDiv.style.backgroundImage = 'url("https://hello.com/an-other-image.jpg")';
Вы можете рассмотреть возможность добавления id, и в этом случае вы можете использовать селектор ID или document.getElementById.
Если есть несколько элементов, которые вы хотите обновить, вы можете использовать document.querySelectorAll, который вернет массив совпадений, который вы можете перебрать и изменить.
function changeToAnotherBgImage(element) {
element.style.backgroundImage = 'url("https://hello.com/an-other-image.jpg")';
}
// Plenty of alternate ways of writing, arrow function may be appropriate
document.querySelectorAll('.class1').forEach(changeToAnotherBgImage);
Что, если класс применяется к нескольким элементам? Не то чтобы ОП думал об этом.
@evolutionxbox Добавил примечание по поводу querySelectorAll - хороший отклик :)
Это работает хорошо ! Спасибо, что нашли время помочь мне, я действительно кое-что узнал. Я думаю, что буду брать уроки JS, я не думал, что мы сможем делать такие вещи (querySelector и .style.backgroundImage)
Вы можете сделать это:
const eleDiv = document.querySelector ('. class'). style.background = "url ('your imge') no-repeat";
Ваш вопрос кажется непонятным. На какое действие вы хотите заменить? Это при нажатии кнопки или что-то в этом роде?