これは少し腹立たしいです。選択した要素から現在の背景画像を変数に保存するコードがあり、それを使用して img タグを作成します。
簡単に言えば、IE6 を除く、私がテストしたすべてのブラウザーで次のように動作します。
var bg = $('.element_selector').css('background-image');
IE6 からの戻り値は「none」です。これは正しくありません。(誰かが「background-image」の代わりに「backgroundImage」を試すことを提案する前に、さいころはありません。)
その値を取得する方法についてのアイデアはありますか?
更新:問題の背景画像がDD_belatedPNGによって処理されたことを忘れていましたが、これが原因のようです。修正をコメントアウトすると、値が得られます。png の修正が行われた後もその値を取得する方法を誰かが知っている場合は、お知らせください。
IE6 でいくつかのテストを行った後、DD_belatedPNGと背景の src で問題を再現できました。
これが私が見つけたものです。background-image呼び出す前に変数を設定するDD_belatedPNG.fix('[selector]');と、目的の結果が得られます。たとえばclickイベントで後で設定している場合は、 の値が得られます"none"。
さらに、DD_belatedPNG は背景画像を含むページに画像要素を追加するため (クラスはDD_belatedPNG_sizeFinder)、1) 再利用、2) コピー、または 3)srcその要素から属性値を取得できる可能性があります。
ここに私のテストコードがあります:
CSS:
#myElement
{
width: 515px;
height: 341px;
margin: 100px auto;
background: #f00 url('http://www.chismbrothers.com/images/woodfloors.png') no-repeat 0 0;
}
HTML:
<div id="myElement"></div>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
jQuery:
$(document).ready(function() {
// Works as expected
var bg = $('#myElement').css('background-image');
$('#test1').text("pre png fix: " + bg);
DD_belatedPNG.fix('#myElement');
$('#myElement').click(function() {
var bg = $(this).css('background-image');
var bgAll = $(this).css('background');
// This yields values of 'none' for bg and 'undefined' for bgAll
$('#test2').html("post png fix: " + bg + "<br />bg: " + bgAll);
// DD_belatedPNG creates an image element on the page with a class of
// 'DD_belatedPNG_sizeFinder' which can be used to get the image src
$('#test3').html('dd_belatedpng_sizeFinder: ' + $('.DD_belatedPNG_sizeFinder').attr("src"));
// Perhaps reapplying 'zoom' css will reapply the BG values?
$(this).css({ zoom: 0 }).css({ zoom: 1 });
// Set values again.
bg = $(this).css('background-image');
bgAll = $(this).css('background');
// No luck...same result as #test2
$('#test4').html("post png fix: " + bg + "<br />bg: " + bgAll);
});
});
backgroundか？