javascript crossbrowser case study - CSS style elements.-优快云博客

本文介绍了一种通过对象检测来实现跨浏览器兼容性的方法，用于访问CSS样式元素。该方法首先检测浏览器支持的属性名（如style或cssText），然后使用正确的属性名来设置或获取元素的CSS样式。

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.