二个人的温暖
客户端javascript对象的几何属性汇总
天使的微笑 发表于 2010-06-03 17:59:10
在 一些客户端javascript对 象中，存在着如宽度、高度、坐标类的几何属性，同时这些属性在不同的浏览器下又有不同的属性名。现在将所有的此类对象的几何属性汇总，便于学习，免得搞 混。
1. 浏览器窗口在桌面的坐标（x,y）
Window对象
IE下：window.screenLeft, window.screenTop（经测试，发现在IE浏览器下，该坐标为文档在屏幕上面的坐标，并非浏览器窗口在屏幕上面的坐标）
Firefox下：window.screenX, window.screenY
2. 浏览器的可视化窗口大小
所有浏览器除了IE：window.innerWidth, window.innerHeight
IE6 with DOCTYPEL：document.documentElement.clientWidth, document.documentElement.clientHeight
IE6 without DOCTYPE：document.body.clientWidth, document.body.clientHeight
3. 浏览器整个窗口的大小
Window对象
IE不 支持：window.outerWidth, window.outerHeight
4. 文档滚动条滚过的宽度和高度
所有浏览器除了IE：window. pageXOffset, window. pageYOffset
IE6 with DOCTYPEL：document.documentElement.scrollLeft, document.documentElement. scrollTOP
IE6 without DOCTYPE：document.body. scrollLeft, document.body. scrollTop
5. 元素的坐标和大小
坐标：Element.offsetLeft, Element.offsetTop（此值为相对坐 标，相对于body或 者其他相对定位的父元素；关于元素绝对位置的计算，还需要考虑父元素offsetParent的坐标）
大 小：Element.offestWith, Element.offsetHeight；clientWidth, clientHeight；ScrollWidth, ScrollHeight
scrollWidth：对 象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）
clientWidth：对 象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。
offsetWidth： 对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
6. 鼠标的坐标
Event对象
Event.clientX, Event.clientY（同时要注意IE和Firefox下兼容性的事件写法）
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
貌似在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()
{
}
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，都兼容了。。。。
