来源于jquery1.2.6源码总结
var userAgent = navigator.userAgent.toLowerCase();
var Browser = {
version:(userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1],
safari:/webkit/.test(userAgent),
opera:/opera/.test(userAgent),
msie:/msie/.test(userAgent) && !/opera/.test(userAgent),
mozilla:/mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent)
}
var CssJs = {
styleFloat:Browser.msie ? "styleFloat" : "cssFloat",
defaultView:document.defaultView || {},
get:function (elem, name) {
var _this = CssJs;
var value, style = elem.style;
function color(elem) { //safari颜色修正
if (!Browser.safari)
return false;
// defaultView is cached
var ret = _this.defaultView.getComputedStyle(elem, null);
return !ret || ret.getPropertyValue("color") == "";
}
// IE中的透明特殊处理
if (name == "opacity" && Browser.msie) {
/*value = elem.filter && elem.filter.indexOf("opacity=") >= 0 ?
(parseFloat(elem.filter.match(/opacity=([^)]*)/)[1]) / 100) + '' :
"" ;*/
value = elem.currentStyle.filter && elem.currentStyle.filter.indexOf("opacity=") >= 0 ?
(parseFloat(elem.currentStyle.filter.match(/opacity=([^)]*)/)[1]) / 100) + '' :
"";
return value == "" ? 1 : value;
}
// Opera显示BUG
if (Browser.opera && name == "display") {
var save = style.outline;
style.outline = "0 solid black";
style.outline = save;
}
//浮动差异
if (name.match(/float/i)) name = styleFloat;
if (style && style[ name ]) return style[ name ];
else if (_this.defaultView.getComputedStyle) { //w3c
//浮动差异
if (name.match(/float/i)) name = "float";
//textAlign 转 text-Align; 使用传统的"text-Align"风格的规则书写方式,而不是"textAlign"
name = name.replace(/([A-Z])/g, "-$1").toLowerCase();
var computedStyle = _this.defaultView.getComputedStyle(elem, null);
if (computedStyle && !color(elem)) {
value = computedStyle.getPropertyValue(name);
} else {//----------不考虑这里的else,应该也用不上
var swap = [], stack = [], a = elem, i = 0;
for (; a && color(a); a = a.parentNode) stack.unshift(a);
for (; i < stack.length; i++) {
if (color(stack[ i ])) {
swap[ i ] = stack[ i ].style.display;
stack[ i ].style.display = "block";
}
}
value = name == "display" && swap[ stack.length - 1 ] != null ?
"none" :
( computedStyle && computedStyle.getPropertyValue(name) ) || "";
for (i = 0; i < swap.length; i++) {
if (swap[ i ] != null) stack[ i ].style.display = swap[ i ];
}
}
if (name == "opacity" && value == "")
value = "1";
} else if (elem.currentStyle) {//ie
var camelCase = name.replace(/\-(\w)/g, function (all, letter) {
return letter.toUpperCase();
});
value = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ];
if (!/^\d+(px)?$/i.test(value) && /^\d/.test(value)) {//不是px单位的值
// Remember the original values
var left = style.left, rsLeft = elem.runtimeStyle.left;
elem.runtimeStyle.left = elem.currentStyle.left;
style.left = value || 0;
value = style.pixelLeft + "px";
// Revert the changed values
style.left = left;
elem.runtimeStyle.left = rsLeft;
}
}
return value;
}
}
/*
* 1、getComputedStyle只读,style = window.getComputedStyle(dom , ":after");第二个参数“伪类”是必需的(如果不是伪类,设置为null)
* 2、element.pixelLeft 自动换算出值对应的 px值
* */
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="cssJs.js"></script>
</head>
<style type="text/css">
h4{margin-bottom: 2px;}
body{ margin: 0 auto; width: 1000px; height: 500px; padding: 10px; margin: 10px; border: 10px solid red}
.clientBox{padding: 10px;opacity: 0.5; filter: alpha(opacity=50);margin: 10px; cursor: move; width: 10px;
overflow: hidden; height: 10px; border: 10px solid red; position: absolute; left: 100px;top:100px;background: white}
#msg{position: fixed;right: 0; top: 20px}
</style>
<body>
<div class="clientBox" id="clientBox"></div>
<div id="msg"></div>
</body>
</html>
<script type="text/javascript">
var Dom = {
$:function (id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
}
var marginTop = CssJs.get(Dom.$("clientBox"), "opacity");
Dom.$("msg").innerHTML = marginTop;
</script>