javascript - trick to manipulate the opacity -

joe.bq.wang

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

最近访客更多访客>>

musicull

hillsoul

virtual_garden

mengke111

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript - trick to manipulate the opacity

博客分类：

javascript

javascript

All other browsre may have supported the opacity CSS property whereas Internext explorer use its properietary alpha filter.

opacity: 0.5;
filter: alpha(opacity=50);

where opacity notation is for all other browsers, and filter is for IE.

so the following code shows how you can do a cross browser opacity

<html>
<head>
<title>Opacity Style Test</title>
<script type="text/javascript">
  (function () {
    var div = document.createElement("div");
    div.innerHTML = "<div style='opacity:.5;'></div>";
    // If .5 becomes 0.5, we assume the browser knows how
    // to handle native opacity
    var native = div.firstChild.style.opacity === "0.5";
    this.opacityStyle = function (elem, value) {
      if (typeof value !== "undefined") {
        if (native) {
          elem.style.opacity = value;
        } else {
          // .filter may not exist
          elem.style.filter = (elem.style.filter || "")
                    // Need to replace any existing alpha
          .replace(/alpha\([^)]*\)/, "") +
                    // If we have a number, set that as the value (0-100)
          (parseFloat(value) + '' == "NaN" ?
            "" :
            "alpha(opacity=" + value * 100 + ")");
        }
        elem.style[floatName] = value;
      }
      if (native) {
        return elem.style.opacity;
      } else {
        // Only attempt to get a value if one might exist
        var match = elem.style.filter.match(/opacity=([^)]*)/);
        return match ?
          (parseFloat(match[1]) / 100) + "" :
          "";
      }
    };
  })();
  window.onload = function () {
    var div = document.getElementById("div");
    // Alerts out '0.5'
    alert(opacityStyle(div));
  };
</script>
</head>
<body>
<div style="opacity:0.5;filter:alpha(opacity=50);" id="div"></div>
</body>
</html>

分享到：

javascript - tricks to deal with colors | javascript - trick to test visibility of ...

2012-08-15 08:26
浏览 765
评论(0)
分类:编程语言
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript - trick to manipulate the opacity

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript - trick to manipulate the opacity

评论

发表评论

相关推荐

javascript - trick to cross browser DOM ready event

javascript - trick to simulate mouseenter and mouseleave

javascript - trick to simulate the change event

javascript - trick to simulate bubbling submit event

javascript - trick to implement bubbling submit event

javascript - trick to detect bubbling supportability

javascript - trigger event and custom events

javascript - trick to handlers management

javascript - trick to centralized store

javascript - trick to fix the event object

javascript - tricks to deal with colors

javascript - trick to test visibility of an element

javascript - trick to get and set height and width

javascript - trick to set/get attributes that expects px values

javascript - trick to get and set CSS style

javascript - trick to normalize href for IE

javascript - trick IE form and its expando attribute

javascript expando and attributes

javascript - trick to getText and setText

javascript - trick/guideline to remove DOM element

最近访客更多访客>>