Доступ к встроенным свойствам CSS с помощью getElementsByClassName - PullRequest
Новая
       21

Доступ к встроенным свойствам CSS с помощью getElementsByClassName

3 голосов
/ 17 декабря 2011

У меня есть этот фрагмент HTML-кода. 

<div class="tagWrapper">
<i style="background-image: url(https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/390945_10150419199065735_543370734_8636909_2105028019_a.jpg);"></i>
</div>

Мне нужно, чтобы этот URL был в скобкахЯ пытался использовать метод getElementsByClassName(), но он не работал.Поскольку url не является элементом HTML, я понятия не имею, как вывести значение.Я не могу использовать getElementById(), потому что я не могу добавить id в HTML (это не мое).Это должно работать в Chrome и Firefox.Есть предложения?

Ответы [ 7 ]

2 голосов
/ 17 декабря 2011

Вы можете использовать querySelector():

Демо: http://jsfiddle.net/ThinkingStiff/gFy6R/

Сценарий: 

var url = document.querySelector( '.tagWrapper i' ).style.backgroundImage;
url = url.substr(4, url.length - 5);
2 голосов
/ 17 декабря 2011

Вы не добавили тег jQuery, поэтому вот собственное решение (обратите внимание, что это, вероятно, не будет работать на более старых версиях IE, но вы сказали, что оно должно работать только на Chrome и FF): 

var origUrl = document.getElementsByClassName("tagWrapper")[0]
                          .children[0].style.backgroundImage;
var url = origUrl.substr(4, origUrl.length - 5);

Или 

var url = origUrl.replace("url(", "").replace(")", "");

Вот скрипка

РЕДАКТИРОВАТЬ

Ответ на ваш комментарий 

document.getElementsByClassName("tagWrapper")

получает все элементы с именем класса tagWrapper.Таким образом, чтобы получить первый, вы берете нулевой индекс 

document.getElementsByClassName("tagWrapper")[0]

Затем вам нужен первый дочерний элемент и свойство backgroundImage этого первого дочернего элемента.

document.getElementsByClassName("tagWrapper")[0]
                          .children[0].style.backgroundImage;

Оттуда просто убрать URL (и) из него 

var url = origUrl.substr(4, origUrl.length - 5);

или 

var url = origUrl.replace("url(", "").replace(")", "");
1 голос
/ 17 декабря 2011

Я думаю, что если вы будете использовать jQuery, это будет проще. 

var w = document.getElementsByClassName('tagWrapper')[0];
for (var i=0; i<w.childNodes.length; i++)
  if (w.childNodes[i].tagName && w.childNodes[i].tagName.toLowerCase() == 'i')
    return w.childNodes[i].style.backgroundImage;
1 голос
/ 17 декабря 2011

Если вы используете jquery, вы можете сделать что-то вроде этого 

$(".tagWrapper i").css("background-image")
0 голосов
/ 17 декабря 2011

Если вам не нужно заботиться о браузерах Microsoft, необработанный JavaScript довольно прост. Вы можете использовать getElementsByClassName и getElementsByTagName, однако проще попробовать querySelectorAll. Я включил оба. Использование регулярного выражения сохраняет относительные ссылки. 

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type='text/javascript'>
    var do_find_a = function() {
        var tmp = document.getElementsByClassName('tagWrapper')[0];
        var tst = tmp.getElementsByTagName('i')[0].getAttribute('style');
        return do_alert(tst);
    }
    var do_find_b = function() {
        var tst = document.querySelectorAll('.tagWrapper i')[0].getAttribute('style');
        return do_alert(tst);
    }
    var do_alert = function(tst) {
        var reg = /background-image:\s*url\(["']?([^'"]*)["']?\);?/
        var ret = reg.exec(tst);
        alert (ret[1]);
        return;
    }
    document.addEventListener('DOMContentLoaded',do_find_a,false);
    document.addEventListener('DOMContentLoaded',do_find_b,false);
</script>
</head>
<body>
    <div class='tagWrapper'>
        <i style='background-image: url("http://example.com/image.jpg");'></i>
    </div>
    Text to ignore.
</body>
</html>

И версия jsFiddle:
http://jsfiddle.net/hpgmr/

0 голосов
/ 17 декабря 2011 
<div class="tagWrapper">
     <i id="something" style="background-image: url(https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/390945_10150419199065735_543370734_8636909_2105028019_a.jpg);"></i>
</div>

// script / without jQuery

var url = document.getElementById('something').style.backgroundImage.match(/\((.*?)\)/)[1];
0 голосов
/ 17 декабря 2011

Использовать jQuery !!! 

$("div.tagWrapper i").css("background-image").substr(4, $("div.tagWrapper i").css("background-image").length-5)

Пример

...