javascript 精确获取样式属性(下)(2)


window.onload = function(){
alert(_("ccc").css("background-color"))
alert(_("aaa").css("width"))
alert(_(document.body).width())
};


我们可以用这个东西研究一下document.body与document.documentElement。

复制代码 代码如下:


function text(){
var body = document.body,html = document.documentElement;
_("w1").innerHTML = _(body).width();
_("w2").innerHTML = _(html).width();
_("h1").innerHTML = _(body).height();
_("h2").innerHTML = _(html).height();
_("ml1").innerHTML = _(body).css("margin-left");
_("ml2").innerHTML = _(html).css("margin-left");
_("mr1").innerHTML = _(body).css("margin-right");
_("mr2").innerHTML = _(html).css("margin-right");
_("mt1").innerHTML = _(body).css("margin-top");
_("mt2").innerHTML = _(html).css("margin-top");
_("mb1").innerHTML = _(body).css("margin-bottom");
_("mb2").innerHTML = _(html).css("margin-bottom");
_("pl1").innerHTML = _(body).css("padding-left");
_("pl2").innerHTML = _(html).css("padding-left");
_("pr1").innerHTML = _(body).css("padding-right");
_("pr2").innerHTML = _(html).css("padding-right");
_("bl1").innerHTML = _(body).css("border-left-width");
_("bl2").innerHTML = _(html).css("border-left-width");
_("br1").innerHTML = _(body).css("border-right-width");
_("br2").innerHTML = _(html).css("border-right-width");
_("qqq").innerHTML = !_.q ? "标准模式" : "怪癖模式";
_("t1").innerHTML = _(body).css("top");
_("t2").innerHTML = _(html).css("top");
_("l1").innerHTML = _(body).css("left");
_("l2").innerHTML = _(html).css("left");
_("ot1").innerHTML = body.offsetTop;
_("ot2").innerHTML = html.offsetTop;
_("ol1").innerHTML = body.offsetLeft;
_("ol2").innerHTML = html.offsetLeft;
_("ct1").innerHTML = body.clientTop;
_("ct2").innerHTML = html.clientTop;
_("cl1").innerHTML = body.clientLeft;
_("cl2").innerHTML = html.clientLeft;
_("cw1").innerHTML = body.clientWidth;
_("cw2").innerHTML = html.clientWidth;
_("ow1").innerHTML = body.offsetWidth;
_("ow2").innerHTML = html.offsetWidth;
_("sw1").innerHTML = body.scrollWidth;
_("sw2").innerHTML = html.scrollWidth;
}



[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]


在标准模式下,火狐等浏览器中我们看到offsetWidth等值最大为1007,因为火狐的offsetWidth不大于clientWidth,而clientWidth是不包含滚动条(滚动条的宽都固定为17px)。在IE中,offsetWidth是比clientWidth多了两个border,由此发现问题,1024-1003-17=4,4应该是两个auto生成,而这个auto应该为border的值,这两个border在IE中是固定死,不能通过以下手段修改。

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdpgfs.html