3

この 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 要素ではないため、値を取り出す方法がわかりません。HTML に をgetElementById()追加できないため、 を使用できません (それは私のものではありません)。idChrome と Firefox で動作する必要があります。助言がありますか？

4

7 に答える 7

2

使用できますquerySelector()：

デモ: http://jsfiddle.net/ThinkingStiff/gFy6R/

脚本：

var url = document.querySelector( '.tagWrapper i' ).style.backgroundImage;
url = url.substr(4, url.length - 5);
于 2011-12-17T18:55:43.533 に答える
2

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(")", "");
于 2011-12-17T17:40:40.787 に答える
1

jqueryを使用している場合、次のようなことができます

$(".tagWrapper i").css("background-image")
于 2011-12-17T17:36:19.757 に答える
1

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;
于 2011-12-17T17:38:29.323 に答える
0

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/

于 2011-12-17T19:24:36.740 に答える
0

jQueryを使用してください!!!

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

例

于 2011-12-17T17:36:33.140 に答える
0 
<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];
于 2011-12-17T17:37:10.360 に答える