Доступ к css-свойству background-image в браузерах webkit - PullRequest
Новая
       30

Доступ к css-свойству background-image в браузерах webkit

0 голосов
/ 13 июня 2011

Я устанавливаю фоновое изображение некоторых элементов с помощью css (некоторые элементы не имеют фонового изображения) 

.file-type-pdf {
    background-image: url("file-type-pdf.png");
}

Затем я пытаюсь определить в javascript, есть ли у определенных элементов фоновое изображение или нет, как показано ниже 

var style = YAHOO.util.Dom.getStyle(el, 'background-image');
console.log(style);

Это отлично работает в FF, где элементы без фонового изображения возвращают 'none', а элементы с фоновым изображением возвращают URL-адрес изображения.

Однако в chrome и safari один и тот же код возвращает пустую строку для обоих случаев.

Если бы я установил фоновое изображение в коде javascript следующим образом, chrome и safari, то верните URL-адрес изображения 'foo.jpg' правильно 

YAHOO.util.Dom.setStyle(el, 'background-image', 'url("foo.jpg")');
var style = YAHOO.util.Dom.getStyle(el, 'background-image');
console.log(style);

Однако я не могу понять, почему эти браузеры не могут получить доступ к фоновому изображению, установленному через css

Также обратите внимание, что этот синтаксис (возможно, более знакомый для некоторых) дает те же результаты (пустая строка в браузерах webkit, но правильная в FF) ... 

var style = window.getComputedStyle(el, null) || el.currentStyle;
console.log(style.backgroundImage);

Любая помощь будет высоко ценится

1 Ответ

0 голосов
/ 13 июня 2011

У меня отлично работает логотип Stack Overflow с помощью консоли Chrome на этой странице.

Для ванильного JS: 

var logo = document.getElementById("hlogo").childNodes[1];
getComputedStyle(logo).getPropertyValue('background-image');

Для jQuery: 

$("#hlogo a").css("backgroundImage")`

Для YUI: 

// You have to load YUI first.
var logo = document.getElementById("hlogo").childNodes[1];
YAHOO.util.Dom.getStyle(logo, 'background-image');

Все возвращаются "url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3)".

...