1、打开sublime text3，也可以用其他编辑器，这里新建一个HTML文档作为示范。
2、创建一下HTML文档的基本架构。
3、设置多个标签，这样等会可以有更多选择。
4、创建一个JS文档，并且与HTML文档关联。
5、输入var test = documentgetElementById( "pp")offsetTop;documentwrite( test )。
6、offsetLeft就能知道元素到顶部的距离。
设剪掉的正方形边长为x
长方体的底面长为50-2x
长方体的底面宽为40-2x
则有：（50-2x）（40-2x）=600
解得x=35或x=10
根据题意x=35不合理，舍
取x=10
也就是盒子高为10厘米
可以使用offset() 方法，该方法返回或设置匹配元素相对于文档的偏移（位置），该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
1、使用offset() 方法获取一个元素距离浏览器的顶部和左边的可视距离，代码如下：
<html><head>
<script type="text/javascript" src="/jquery/jqueryjs"></script>
<script type="text/javascript">
$(document)ready(function(){
$("button")click(function(){
x=$("p")offset();
$("#span1")text(xleft);
$("#span2")text(xtop);
});
});
</script>
</head>
<body>
<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
<button>获得 offset</button>
</body>
</html>
2、运行的结果如下：
$("#div_id")height();
// 获得的是该div本身的高度, (不包含padding,margin,border)
$("#div_id")outerHeight();
// 包含该div本身的高度, padding上下的高度, 以及border上下的高度(不包含margin的高度)
$("#div_id")outerHeight(true);
// 包含该div本身的高度, 以及padding,border,margin上下的总高度
$(window)height();
// 获取浏览器显示区域（可视区域）的高度
$(window)width();
// 获取页面的文档高度
$(document)height();
// 浏览器当前窗口文档的高度
$(documentbody)width();
// 浏览器当前窗口文档body的高度
$(document)scrollTop();
// 获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
objoffset()top
// 某个元素的上边界到body最顶部的距离（在元素的包含元素不含滚动条的情况下）
以上就是关于求教js如何获取元素到浏览器顶部的距离全部的内容，包括:求教js如何获取元素到浏览器顶部的距离、求盒子的高度、jquery获取元素距离浏览器顶部的可视高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）