js获取各种高度的方法
js获取各种高度的方法
1.获取元素的高度
模板:html , css
//css
#box{
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
height:60px;
}
//html
<div id="box"></box>
2.获取盒子的内容高度
内容高度也可用用box.clientHeight获取,内容高度不包括边框和外边距和滚动条
var box = document.getElementById("box")
var contentHeight = window.getComputedStyle(box).height //输出 '60px'
3.js获取移动端屏幕高度和宽度等设备尺寸
兼容性比较好的方法
document.documentElement.clientWidth;
document.documentElement.clientHeight;
4.获取页面屏幕可见区域高度
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth
--部分jQuery函数
$(window).height() //浏览器时下窗口可视区域高度
$(document).height() //浏览器时下窗口文档的高度
$(document.body).height() //浏览器时下窗口文档body的高度
$(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin
$(window).width() //浏览器时下窗口可视区域宽度
$(document).width()//浏览器时下窗口文档对于象宽度
$(document.body).width() //浏览器时下窗口文档body的高度
$(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding
5.HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth
--部分jQuery函数
$(window).height() //浏览器时下窗口可视区域高度
$(document).height() //浏览器时下窗口文档的高度
$(document.body).height() //浏览器时下窗口文档body的高度
$(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin
$(window).width() //浏览器时下窗口可视区域宽度
$(document).width()//浏览器时下窗口文档对于象宽度
$(document.body).width() //浏览器时下窗口文档body的高度
$(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding
js获取各种高度的方法的更多相关文章
- JS获取div高度的方法
有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...
- JS获取网页宽高方法集合
JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...
- js获取浏览器高度和宽度值,尽量的考虑了多浏览器。
js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...
- js获取url参数的方法
js获取url参数的方法有很多. 1.正则分析 function getQueryString(name) { var reg = new RegExp("(^|&)" + ...
- jquery、js获取页面高度宽度等
jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...
- (转)用JS获取地址栏参数的方法(超级简单)
转自http://www.cnblogs.com/fishtreeyu/archive/2011/02/27/1966178.html 用JS获取地址栏参数的方法(超级简单) 方法一:采用正则表达式获 ...
- 【转】js 获取浏览器高度和宽度值(多浏览器
原文地址:http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ...
- js获取url传值的方法
这篇文章主要介绍了js获取url传值的方法,实例分析了字符串分割与正则分析两种方法,并补充了一个基于正则匹配实现的js获取url的get传值函数,需要的朋友可以参考下 js获取url参数值: inde ...
- js获取checkbox值的方法
js获取checkbox值的方法.分享给大家供大家参考.具体实现方法如下:<html> <head> <meta http-equiv="Content-Typ ...
- JS获取标签内容的方法
JS获取标签内容的方法 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
随机推荐
- 主线程-创建Thread类的子类
主线程 Java使用java.lang.Thread类代表线程,所有的线程对象都必须是Thread类或其子类的实例.每个线程的作用是完成一定的任务,实际上就是执行一段程序流即一段顺序执行的代码.Jav ...
- 如何通过Java代码向Word文档添加文档属性
Word文档属性包括常规.摘要.统计.内容.自定义.其中摘要包括标题.主题.作者.经理.单位.类别.关键词.备注等项目.属性相当于文档的名片,可以添加你想要的注释.说明等.还可以标注版权. 今天就为大 ...
- java的部分特性与下载安装
Java Java的特性与优势 简单性:C++语法纯净版,没有头文件没有指针运算 面向对象:程序设计技术,重点放在对象与对象接口上,用人的思维方式去写程序,万物皆对象 可移植性:跨平台性,可以跨平台移 ...
- 在 Asp.Net Core 中什么是认证和授权
认证(Authentication) 和 授权(Authorization)在 Asp.Net core 充当了两个不同的职责.有的老伙计在理解的时候还存在误解.本文我们将会通过一些简单的例子来说明这 ...
- WSL 配置输入法
安装输入法 sudo apt install dbus-x11 im-config fonts-noto fcitx fcitx-pinyin fcitx-sunpinyin fitx-googlep ...
- MySQL 中的事务理解
MySQL 中的事务 前言 原子性 一致性 持久性 并发事务存在的问题 脏读 幻读 不可重复读 隔离性 事务的隔离级别 事务隔离是如何实现 可重复读 和 读提交 串行化 读未提交 可重复读解决了幻读吗 ...
- 打开MASA Blazor的正确姿势2:组件总览
官网文档按拼音罗列组件,且部分嵌套组件没有在导航栏内列出,不利于浏览查阅.本篇文章的主要目的,主要是对所有组件按大家习惯的方式进行分类,简要介绍组件,并建立跳转官方文档的链接. 一.导航布局类 1 ...
- 如何优化线上WebAssembly
如何优化线上WebAssembly WebAssembly部署使用 HTTPS : 为什么?我可以通过一个案例查看 ,下面我们会通过masa docs站点进行测试 打开 http://docs.mas ...
- RocketMQ - 消费者启动机制
RocketMQ客户端中有两个独立的消费者实现类:org.apache.rocketmq.client.consumer.DefaultMQPullConsumer 和 org.apache.rock ...
- Solon2 的应用生命周期
Solon 框架的应用生命周期包括:一个初始化函数时机点 + 六个事件时机点 + 两个插件生命时机点 + 两个容器生命时机点(v2.2.0 版本的状态): 提醒: 启动过程完成后,项目才能正常运行(启 ...