客户端javascript对象的几何属性汇总

天使的微笑 发表于 2010-06-03 17:59:10

客户端javascript对象的几何属性汇总

       在 一些客户端javascript对 象中,存在着如宽度、高度、坐标类的几何属性,同时这些属性在不同的浏览器下又有不同的属性名。现在将所有的此类对象的几何属性汇总,便于学习,免得搞 混。

1. 浏览器窗口在桌面的坐标(x,y


      
Window
对象

       IE下:window.screenLeft, window.screenTop(经测试,发现在IE浏览器下,该坐标为文档在屏幕上面的坐标,并非浏览器窗口在屏幕上面的坐标)

Firefox下:window.screenX, window.screenY



2.
浏览器的可视化窗口大小


      
所有浏览器除了IEwindow.innerWidth, window.innerHeight

       IE6 with DOCTYPELdocument.documentElement.clientWidth, document.documentElement.clientHeight

       IE6 without DOCTYPEdocument.body.clientWidth, document.body.clientHeight



3.
浏览器整个窗口的大小


      
Window
对象

       IE不 支持:window.outerWidth, window.outerHeight



4.
文档滚动条滚过的宽度和高度


      
所有浏览器除了IEwindow. pageXOffset, window. pageYOffset

       IE6 with DOCTYPELdocument.documentElement.scrollLeft, document.documentElement. scrollTOP

       IE6 without DOCTYPEdocument.body. scrollLeft, document.body. scrollTop



5.
元素的坐标和大小


      
坐标:Element.offsetLeft, Element.offsetTop(此值为相对坐 标,相对于body或 者其他相对定位的父元素;关于元素绝对位置的计算,还需要考虑父元素offsetParent的坐标)

       大 小:Element.offestWith, Element.offsetHeightclientWidth, clientHeightScrollWidth, ScrollHeight

scrollWidth:对 象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)

clientWidth:对 象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。

       offsetWidth: 对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。



6.
鼠标的坐标


      
Event
对象

       Event.clientX, Event.clientY(同时要注意IEFirefox下兼容性的事件写法)



7.
屏幕宽度、高度和屏幕的可用宽度、高度


      
Screen
对象

       屏 幕宽度、高度;screen.width, screen.height(屏幕的宽度,像素值)

       屏 幕的可用宽度、高度:screen.availWidth, screen.availHeight(除去了一些不自动隐藏的类似任务栏的东西所占用的宽度)



8.
元素的css属 性宽度、高度、外边距、内边距、坐标


      
Element
对象

       Element.style.width, Element.style.height

       Element.style.marginLeft, Element.style.marginTop

Element.style.paddingLeft, Element.style.;paddingTop

Element.style.left, Element.style.top




(注:下图来自于 "web前端开发群" 风干的果子

关于iframe去掉横滚动条

天使的微笑 发表于 2010-05-26 13:52:57

body{overflow-x:hidden;overflow-y:auto}
貌似在IE6下面这样还不起作用,那么在用html属性
html{overflow-x:hidden;overflow-y:auto}
就会实现了。

固定footer

天使的微笑 发表于 2010-05-26 13:49:35

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯css固定footer, on the bottom of screen</title>
<style type="text/css">
* { margin:0; padding:0;}
#footer { position:fixed; left:0; bottom:-1px; height:80px; width:100%; background:#0000FF;}
* html #footer { position:absolute;}
body { padding:0 10px 0 10px; text-align:center;}
#main { height:700px; background:#CCCCCC;}
</style>
<!--[if lte ie 6]>
   <style type="text/css">
   /*<![CDATA[*/
html { overflow-x:auto; overflow-y:hidden;}
body { height:100%; overflow-y:auto;}
   /*]]>*/
   </style>
<![endif]-->
</head>
<body>
<div id="main"></div>
<div id="footer">are you ok?</div>
</body>
</html>


关于IE6有一些问题。不支持fixed属性。
一种是用js去掉fixed属性,让页面原始显示,需要scroll down。
二种是定死页面的高度的话,可以实现。

JS获取当前对象大小以及屏幕分辨率等 [此博文包含图片]

天使的微笑 发表于 2010-05-26 12:36:28

<script>
function getInfo()
{
   
var s = "";
    s
+= " 网页可见区域宽:"+ document.body.clientWidth;
    s
+= " 网页可见区域高:"+ document.body.clientHeight;
    s
+= " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
    s
+= " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)";
    s
+= " 网页正文全文宽:"+ document.body.scrollWidth;
    s
+= " 网页正文全文高:"+ document.body.scrollHeight;
    s
+= " 网页被卷去的高(ff):"+ document.body.scrollTop;
    s
+= " 网页被卷去的高(ie):"+ document.documentElement.scrollTop;
    s
+= " 网页被卷去的左:"+ document.body.scrollLeft;
    s
+= " 网页正文部分上:"+ window.screenTop;
    s
+= " 网页正文部分左:"+ window.screenLeft;
    s
+= " 屏幕分辨率的高:"+ window.screen.height;
    s
+= " 屏幕分辨率的宽:"+ window.screen.width;
    s
+= " 屏幕可用工作区高度:"+ window.screen.availHeight;
    s
+= " 屏幕可用工作区宽度:"+ window.screen.availWidth;
    s
+= " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
    s
+= " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
    alert (s);
}
getInfo();
</script>

用javascript控制css中style.height和style.width时应注意px单位问题

天使的微笑 发表于 2010-05-26 12:35:28

前些时间才注意到这一点,也算是不幸中的幸福了。。。。。

javascript在ie中解析时,可以这样写:

1、document.getElementById('div').style.height=100;    //这样写以IE里会正确执行,把ID为div元素高改为100象素。

2、但是读的时候,alert(document.getElementById('div').style.height+10);    //这样将会出错,因为读取style.height的时候,会以"100px"的形式出现。

3、到了FF里,不光读出来的是"100px",写的时候,也必须是document. getElementById('div').style.height='100px';这样才能有效果。。。也许正是FF的严谨吧。

OK,这样好搞多了,以后用javascript控制css的对象高度或者宽度的时候,我们就直接用 parseInt($('div').style.height)这样就完美了,无论读写,IE或者FF,都兼容了。。。。