JavaScript琐碎知识

1、获取页面中元素距离屏幕四周的距离

var div=document.getElementById("box");

var distance=div.getBoundingClientRect();

1、屏幕距离的问题

javascript中获取dom元素高度和宽度的方法如下:

网页可见区域宽: document.body.clientWidth

网页可见区域高: document.body.clientHeight

网页可见区域宽: document.body.offsetWidth (包括边线的宽)

网页可见区域高: document.body.offsetHeight (包括边线的高)

网页正文全文宽: document.body.scrollWidth

网页正文全文高: document.body.scrollHeight

网页被卷去的高: document.body.scrollTop

网页被卷去的左: document.body.scrollLeft

对应的dom元素的宽高有以下几个常用的:

元素的实际高度:document.getElementById("div").offsetHeight

元素的实际宽度:document.getElementById("div").offsetWidth

元素的实际距离左边界的距离:document.getElementById("div").offsetLeft

元素的实际距离上边界的距离:document.getElementById("div").offsetTop

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 我们首先要明白,我们给页面添加效果用到的js到底是什么?js其实包含三部分:dom 文档对象模型 bom 浏览...
    一直以来都很好阅读 4,206评论 0 0
  • DOM DOM内容主要分为四部分: 什么是DOM和节点; 获取节点; 节点操作(3种); 属性操作(3种)。 什么...
    magic_pill阅读 4,231评论 0 1
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 7,760评论 0 8
  • 说起怀孕生小孩,大多数人都是比较接受自然的方式, 但是有些人啊,会不孕,什么输卵管堵塞啊一些妇科毛病, 也有一些人...
    扬灵灵儿阅读 2,854评论 0 0
  • ![漂亮图片](http://img2.imgtn.bdimg.com/it/u=2390563975,39720...
    不压压阅读 1,004评论 0 1

友情链接更多精彩内容