您的位置：首页 > 编程语言

【Web Tricks 10】web编程中几个容易混淆的函数（概念）

2013-04-18 11:27 495 查看

下面有几个函数（概念）平常使用的时候比较容易混淆，这里做个总结（所有图来源于jquery）

1、innerWidth()：包含了padding和内容宽度（innerHeight()类似）

w3school上给出的innerWidth解释：

只读属性，声明了窗口的文档显示区的高度和宽度，以像素计。

这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。

IE 不支持这些属性。它用 document.documentElement 或 document.body （与 IE 的

版本相关）的 clientWidth 和 clientHeight 属性作为替代。

2、outerWidth()：根据是否含有参数true来区分是否包含margin（outerHeight()类似）

w3school上给出的outerWidth解释：

outerwidth 属性是一个只读的整数，声明了整个窗口的宽度。

IE 不支持此属性，且没有提供替代的属性。
PS：上面所说的函数是Jquery函数，本身已经做了兼容，所以在所有浏览器的表现一样，
给出测试样例：

<!DOCTYPE html>
<html>
<head>
<style>
p { margin:10px;padding:5px;border:2px solid #666; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p>Hello</p><p></p>
<script>var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth()+ " , outerWidth(true):" + p.outerWidth(true) );
$("p:first").text( "innerWidth:" + p.innerWidth() );</script>
</script>

</body>
</html>

3、scrollTop([value])：获取当前匹配的元素集合中第一个元素的垂直滚动条的位置，或设置每一

个匹配元素的滚动条的垂直位置。（scrollLeft()类似，只不过是水平方向）

这里给出滚动条滑到底部加载元素的一种实现

function loadData()
{
totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());

if ($(document).height() <= totalheight)
{
$("#container").append($(document).scrollTop()+"<br/>");
}
}

$(window).scroll( function() {
loadData();
});

从实现中我们可以知道，window的height获取的是可视高度，而document的height获取的是已经渲染的文档

高度

4、offset()：返回值有top和left属性，分别可获取元素相对于document的位移

offsetParent()：获取设置了position的父元素

position()：返回值有top和left属性，分别可获取元素相对于设置了position的父元素的位移

那么就会有一个问题，如果没有父元素设置了position属性呢？嗯，如果没有设置的话，offset()

和position()是不会有什么差别（仅仅是实验结果，如果有什么不对的还请各位指教）

5、Jquery中event.pageX和event.pageY：分别代表鼠标相对于文档左边界和上边界的位移

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航