背景画像名の取得

[新着] TAG indexオフライン版 3.0 を準備中です



0   名前: selenium_user : 2007/05/18(金) 05:06  ID:r2tBrgEl sub-3e
javascriptで、現在のウィンドウの背景画像名(またはURL)を取得するにはどうすればよいのでしょうか?

1   名前: gonta : 2007/05/18(金) 05:06  ID:Gje/L/NE sub-RV
var burl = document.body.getAttribute("background");
こんな感じでしょうかね。

2   名前: 匿名 : 2007/05/18(金) 05:06  ID:eKwtY88/ sub-Cz
もし body 要素の background 属性を使っているなら、>>1 で構いません。ただ、2 点。



DOM-HTML の document.body を使うのなら、同じく DOM-HTML の body.background を使った方が無難だと思います。
var uri = document.body.background;

element.attr = valueelement.setAttribute ('attr', value) が「等価である」と勘違いしている人が非常に多いのですが、大いなる誤解です。

・前者は DOM-HTML に定義された、HTML ドキュメントに特化したインタフェースで、value のデータ型を柔軟に扱える。
・後者は DOM-Core で定義された汎用メソッドであり、value は必ず文字列

最近、element.setAttribute('onclick', new Function (..)) というコードをよく目にします。しかし、こんなデタラメな構文でうまくいく(ように見える)のは、手抜き実装の IE だけ。他のブラウザでうまくいかないのは当たり前です。HTML ドキュメントしか扱わないのであれば、DOM0 の流れを汲む DOM-HTML で一貫することを(現状では)オススメします。

# ただし、もしも XHTML を XML として扱う場合は DOM-HTML を使用できない可能性もあるので、DOM-Core だけで処理しても良いでしょう。
var ns = 'http://www.w3.org/1999/xhtml';
var uri = document.getElementsByTagNameNS (ns, 'body')[0].getAttribute ('background');



body 要素の background 属性は、10 年前から廃止予定です。一般的には CSS で背景指定しているでしょう。
body {
  background: url("sample.png");
}

この場合、background-image の値を得るには以下のようにします。
var element = document.body;

// Firefox、Opera、Safari
var value = document.defaultView.getComputedStyle (element, null).backgroundImage;

// IE
// var value = element.currentStyle.backgroundImage;

なお、戻り値の value ですが、必ずしも書いた通りの形式とは限りません。getComputedStyle() が返すのは指定値ではなく、その名の通り計算値の集合です。従って、相対値やキーワードは絶対値に変換されていますので、注意して下さい。

Firefox 1.5、Safari 2.0: 引用符なしの絶対 URI
・value == 'url(http://www.tagindex.com/sample.png)'

Opera 9.0、IE 6.0: 二重引用符付きの絶対 URI
・value == 'url("http://www.tagindex.com/sample.png")'

もし、相対 URI を「書いた通りに」取得したいということであれば……まあ、頑張ってみて下さい。かなり面倒くさいと思います。ほとんどの場合、計算値が分かれば十分です。

# style 要素内に書いているなら innerHTML で自力解析するのもアリでしょうが、どの道、詳細度の計算は必要です。簡単な CSS だけなら不要かもしれませんが。

一覧へ戻る