element对象的宽高属性

  • 1. DOM树
  • 2.document对象
  • 3.element对象
  • 4. 获取元素高度宽度

1. DOM树

浏览器根据DOM模型,将结构化文档HTML解析成节点,DOM的最小组成单位就是节点,这些节点是树形结构。

DOM:文档对象模型,是js操作网页的接口。DOM可以用多种语言操作,js是最常见的操作DOM的语言。

节点:是构成网页的最基本的组成部分,网页中有很多节点。html 元素、属性、文本、注释、整个文档等都是节点。

DOM树形结构如图所示:

2.document对象

document对象是文档的根节点,当网页载入时,这个节点就有了。可以访问页面中所有元素。如:
1. document.body---body 2. document.documentElement---html

3.element对象

element代表元素节点,代表页面中的一个个标签,也是DOM树的叶子。

4. 获取元素高度宽度

// clientHeight--包含padding
// 获取视口高度---document.documentElement---即html整个网页document.documentElement.clientHeight;// 获取视口宽度--包含paddingdocument.documentElement.clientWidth;// 获取页面内容高度---因为body由内容撑开document.body.clientHeight// 获取垂直滚动条向下滚动的距离document.documentElement.scrollTop;// 获取水平滚动条向右滚动的距离document.documentElement.scrollLeft;

js获取页面高度获取视口高度获取内容高度获取滚动条宽度高度相关推荐

  1. 使用java代码获取yml及properties文件中的内容,获取值

    获取properties文件中的内容 最近做项目一些值需要放在配置文件中,一开始使用的是properties文件,我这里没有使用注解@Value获取. 获取: InputStream in = Mes ...

  2. html最小高度怎么写,html – 在内容容器上设置最小高度

    我有一个案例,我没有看到解决方案.这是我的问题: 我有一个页面有三个部分(页眉,部分和页脚)页脚必须始终冲到底部.部分部分应该占据页眉和页脚之间的所有可用位置,但必须具有根据页面不同的最小高度(我将在 ...

  3. Java正则获取a标签href_获取页面所有a标签href

    怎样获取页面中所有带href属性的标签集合 使用: document.links document.links instanceof HTMLCollection; 注意: 1. a 标签和 area ...

  4. 解决--python+selenium获取页面一闪几秒就消失的元素内容

    在获取页面一些弹框提示的内容时候,首先要定位到相对应的元素,元素的定位方式有很多种,alert弹框的获取方式也很多 这里遇到一种前端弹框提示信息是用js生成,页面弹框提示信息一闪几秒就没了 背景: 获 ...

  5. 通过哪些方法可以获取页面的html元素,JavaScript获取页面元素的常用方法详解

    1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...

  6. js获取window窗口高度(页面滚动条可滚动高度) - 代码篇

    js中获取窗口高度的方法 取窗口滚动条滚动高度 (如下文 · 截图) 一. javascript 和 jquery代码: //原生 javascript 代码: let scrollHeight = ...

  7. 原生js获取html元素高度,js获取页面及个元素高度、宽度的代码

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...

  8. js获取页面的各种高度与宽度

    document.body.scrollTop等属性可以获取页面滚动距离等,但是此类属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0, 所以一 ...

  9. js 和 query 获取页面和滚动条的高度

    //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollM ...

最新文章

  1. Github的创建及使用
  2. Spring Cloud Gateway不能使用外置tomcat部署的问题
  3. oracle获取当前日期的前一天,判断两个日期是否相等
  4. android进程自动启动时间,如何统计Android App启动时间
  5. Qt-捕获Windows消息
  6. 关于车机互联方式的一点想法
  7. 现在生活好累啊。。。
  8. C# Winform开发框架源码 Winform系统开发 图书借阅系统,图书管理系统,说明文档齐全
  9. Python 类与对象
  10. xshell4连接ubuntu20.04失败,提示“找不到匹配的key exchange算法“
  11. Pr:制作片尾滚动字幕(基本图形法)
  12. linux命令弹出移动硬盘,usb设备(移动硬盘或U盘),弹出时提示“有进程或程序占用,无法弹出”。解决办法...
  13. 快捷打开计算机管理设置,Win7系统下怎么设置Ctrl+Alt+Del快捷打开任务管理器【图文】...
  14. xp计算机用户名和密码忘记了怎么办,XP系统开机密码忘记了怎么办?
  15. 【深入理解TcaplusDB技术】详细介绍TDR 表中Tcaplus的相关属性
  16. 苏格拉底的最后日子――柏拉图对话集
  17. 技术资源:国内知名技术网站网址
  18. 【STL学习指南】STL的入门学习指南
  19. vhdl7我学习得第一个fpga项目——倒计时显示
  20. 朋友问我移居香港后悔没?这回答够真实!

热门文章

  1. 专题**-我从内部看ARM
  2. 小学信息技术课程目录
  3. 《在路上》——今何在
  4. H5新标签Html5新标签解释及用法
  5. chrome浏览器F12测试使用
  6. 曾国藩为人处世“八本”
  7. nginx停止与重启
  8. 使用OIDC和Ionic for JHipster保护您的移动应用程序
  9. Redis实例绑定CPU物理核优化Redis性能
  10. 兼顾内存和速度的C语言代码优化的方法