ボタンをクリックすると、アラートが表示されます。 background-image
URL送信します#div1
。
出来ますか?
ボタンをクリックすると、アラートが表示されます。 background-image
URL送信します#div1
。
出来ますか?
回答:
http://jsfiddle.net/mblase75/z2jKA/2の.replace()
方が読みやすいことが多いため、通常は可能な限り正規表現を使用します。
$("div").click(function() {
var bg = $(this).css('background-image');
bg = bg.replace('url(','').replace(')','').replace(/\"/gi, "");
alert(bg);
});
url(my%20picture%20Copy\(1\).jpg)
か?置換すると、bg変数はになりますmy%20picture%20Copy\(1\.jpg)
。また、引用符を削除しません(例url("the picture.jpg")
)。
background-image:linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.4)), url("https://mdn.mozillademos.org/files/7693/catfront.png")
はい、それは可能です:
$("#id-of-button").click(function() {
var bg_url = $('#div1').css('background-image');
// ^ Either "none" or url("...urlhere..")
bg_url = /^url\((['"]?)(.*)\1\)$/.exec(bg_url);
bg_url = bg_url ? bg_url[2] : ""; // If matched, retrieve url, otherwise ""
alert(bg_url);
});
.css
メソッドは、1つの引数で呼び出されると、プロパティの値を返します。
background-image: url('photo(2012).png');
ください。少しのコードで「 'photo(2012.png')」が表示されますが、これは明らかに正しくありません。
次のような拡張CSS定義を処理する回答が少し改善されました。
background-image: url(http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png), -webkit-linear-gradient(top, rgb(81, 127, 164), rgb(48, 96, 136))
JavaScriptコード:
var bg = $("div").css("background-image")
bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
結果:
"http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png"
すでに述べたように、Blazemongersソリューションは引用符を削除できません(Firefoxから返されるなど)。Rob Wsのソリューションはかなり複雑だと思うので、ここに2セントを追加します。
$('#div1').click (function(){
url = $(this).css('background-image').replace(/^url\(['"]?/,'').replace(/['"]?\)$/,'');
alert(url);
})
これに正規表現を使用することは、主に次の理由で誤りがあると思います
以来URL(「と」)コンポーネントがそうのようなあなたの文字列をトリム、一定です。
$("#id").click(function() {
var bg = $(this).css('background-image').trim();
var res = bg.substring(5, bg.length - 2);
alert(res);
});
"
この構文では、sはオプションだと思います。url(myimg.jpg)
ここでは問題なく動作します。
これを使っています
function getBackgroundImageUrl($element) {
if (!($element instanceof jQuery)) {
$element = $($element);
}
var imageUrl = $element.css('background-image');
return imageUrl.replace(/(url\(|\)|'|")/gi, ''); // Strip everything but the url itself
}
ここでは削除されます簡単な正規表現であるurl("
と")
返される文字列からは。
var css = $("#myElem").css("background-image");
var img = css.replace(/(?:^url\(["']?|["']?\)$)/g, "");