Использование IF со style.backgroundImage

376

26 сентября 2017, 08:39

Привет. Я начал изучать JS и в процессе работы возник вопрос.

Я вызываю простую функцию, которая проверяет фоновое изображение div с id #play-edm-track, который по умолчанию имеет фон "img/portfolio/play-hover.png". После этого я хочу заменить фон на другой. Однако по какой-то причине утверждение IF ложно.

function() {
if (document.getElementById('play-edm-track-1').style.backgroundImage == "url(img/portfolio/play-hover.png)") {
    document.getElementById('play-edm-track-1').style.backgroundImage = "url(img/portfolio/play-inactive.png)";
}
};

Как реализовать эту задачу? Можно ли это сделать средствами JS или нужно обязательно использовать jQuery? Спасибо.

Answer 1

Если background-image не задан элементу "инлайном" (т.е. не прописан в теге самого элемента), то .styl‌e.backgroundImage выдаст "пустое" значение. Если нужно прочитать это значение из стилей, то тогда нужно использовать:

let block = document.getElementById('Block'); 
 
//Получаем значение стиля  
let bg = window.getComputedStyle(block).getPropertyValue('background-image'); 
 
//Т.к. значение возвращается в виде строки url(...), убираем ненужные для проверки символы и получаем "чистую" ссылку на изображение 
let bg_clear_url = bg.slice(4, -1).replace(/"/g, "") 
 
//После чего делаем проверку 
if(bg_clear_url === 'https://image.noelshack.com/fichiers/2017/38/2/1505774813-photo4.jpg') { 
	console.log('true') 
}

div { 
	width: 300px; 
	height: 300px; 
	border: 1p xolid #c0c0c0; 
	background-image: url(https://image.noelshack.com/fichiers/2017/38/2/1505774813-photo4.jpg); 
	margin: 30px auto; 
	background-repeat: no-repeat; 
}