background

CSS javascript

CSSの background属性の取得について、だめだった報告。

Javascriptで以下のように 単純な jQuery を利用したソースを書く。
（Firefox2,IE６にて）

<html>
<head>
<style type="text/css">
  
  #hoge{
    background: transparent url('hoge.gif') no-repeat 10px 10px;
    width: 10px;
    height: 10px;
  }

</style>
</head>
<body>
  <div id="hoge"></div>
  <input type="button" id="btn" value="background get!">

  <script src="jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
      $(function(){
        $('#btn').click(function(){
          alert( $('#hoge').css('background') );
        });
      });
  </script>
</body>
</html>

上記で ボタンを押すと、アラートが表示されるが、FireFoxは空欄が表示され、IE6は、undefined が表示される。

次に backgroundを 個別の属性に分けて試してみると

値が取得できた属性

  • background-image
  • background-repeat
  • background-color
  • background-attachment
  • background-position-x（IEのみ）
  • background-position-y（IEのみ）

値が取得できない属性

  • background-position

background-position を backgroundPosition としてみても取得はできなかった。

なぜ、background-position だけ取得できないんでしょうかね？
特別な意味でもあるのかな？

はてなで質問してみてるけど、どうも仕様的にそうなってるみたいな雰囲気？？？