javascript crossbrowser case study - CSS style elements. -

joe.bq.wang

浏览: 403259 次
性别:
来自: 上海

最近访客更多访客>>

musicull

hillsoul

virtual_garden

mengke111

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript crossbrowser case study - CSS style elements.

javascript

It seems that to access the CSS style element, different browser has different expectation on the name of the attribute name, one is the "style", which is supported by many a browser such as IE and chrome, and the other is "cssText"? whichi I am not sure who is using that .

to provide a cross-browser compatiblity , here is the code that shows you how to do the css style access by object detection .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
      var STYLE_NAME = (function () {
        var div = document.createElement("div");
        div.style.color = "red";
        if (div.getAttribute("style")) {
          return "style";
        }
        if (div.getAttribute("cssText"))
          return "cssText";
      })();

      alert("the attribute name is " + STYLE_NAME);

      // Later  on:
      window.onload = function () {
        alert("this is a simple test");
        test2.setAttribute(STYLE_NAME, document.getElementById(STYLE_NAME));
        // the code given below is used in my referenced book, however, it does not work.
        //        document.getElementById("test2").getAttribute(STYLE_NAME) = document.getElementById("test").getAttribute(STYLE_NAME);

      };

    </script>
</head>
<body>
  <div id="test" style="color:Red;"></div>
  <div id="test2"></div>
</body>
</html>

In the above example, it tries to sett a div with id "test2" with the value from another div named "test". and it does this by two stesp

1. the feature detection, it detect which name is supported, and then store it as a varaible.

2. then it used the value stored to determine which to use.

分享到：

javascript CSS Selector engine. | Winforms Printing classes

2012-08-10 08:38
浏览 686
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript crossbrowser case study - CSS style elements.

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript crossbrowser case study - CSS style elements.

评论

发表评论

相关推荐

最近访客更多访客>>