js-获取屏幕的中各种宽高
网页可见区域高: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
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 垂直方向滚动的值
js-获取屏幕的中各种宽高的更多相关文章
- js获取屏幕(设备)宽高
平常获取设备的宽高无非就那几 <script language="javascript"> var h = ""; h += " 网页可见 ...
- JS获取盒模型对应的宽高
## 获取内联样式宽高 只能获取内联设置的样式,在style或者.css文件中设置的无法获取 let div = document.querySelect('.test'); let width = ...
- JS根据屏幕分辨率改变背景宽高
//控制浏览器显示的高宽 function document_loaded() { GotoMainStep(); /; document.getElementById("main1&quo ...
- js获取屏幕
js获取屏幕(设备)宽高 <script language="javascript"> var h = ""; h += " 网页可见区域 ...
- js兼容性——获取当前浏览器窗口的宽高
通过onresize事件 window.onresize = function () { document.title = client().width + " "+ client ...
- js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法)
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...
- js获取屏幕大小
1.js获取屏幕大小 <html> <script> function a(){ document.write( "屏幕分辨率为:"+screen.widt ...
- 如何设置html中img宽高相同-css
最近项目中有一个问题,做一个响应式的盒子,随着屏幕的变化, 宽高一直保持相等,之前一直使用js动态设置,获取盒子的宽度来设置盒子高度. 但是加载时样式显示不是很好,后来直接用css实现. html部分 ...
- 关于Chrome(谷歌浏览器)对docume,准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top
对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途.今天在ext中看到 document.compatMode的使用,感觉这个对于我们开发兼容性的 ...
随机推荐
- [ZJOI2008]杀蚂蚁antbuster 题解
一个题目的可读版本:https://www.zybuluo.com/Jerusalem/note/221811 这两天做的又一道大模拟题,感觉这玩意有毒,会上瘾啊…… 比起猪国杀这道题真心不知道高到哪 ...
- Bzoj 2288 生日礼物题解
2288: [POJ Challenge]生日礼物 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 856 Solved: 260[Submit][S ...
- Spark学习之RDD
RDD概述 什么是RDD RDD(Resilient Distributed Dataset)叫做弹性分布式数据集,是Spark中最基本的数据抽象,它代表一个不可变.可分区.里面的元素可并行计算的集合 ...
- Hive调优策略
Hive调优策略 Fetch抓取 Fetch抓取是指,Hive中对某些情况的查询可以不必使用MapReduce计算. 例如:select * from employee:在这种情况下,Hive可以简单 ...
- Spring管理事物两种方式
Spring管理事物两种方式 1. 编程式事物管理(在开发中不经常使用) 使用步骤 1. 配置数据库事物管理 DataSourceTransactionManager <!--配置事物管理器-- ...
- 01、HTML 简介
实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
- Git实战
Git实战 1.Git特点 1.1.Git两大特点 版本控制:可以解决多人同时开发的代码问题,也可以解决找回历史代码的问题. 分布式:Git是分布式版本控制系统,同一个Git仓库,可以分布到不同的机器 ...
- 摘录C#代码片段
1.保存数据到指定文件String response = "";//数据 byte[] bytes = response.getBytes();//转化Byte string fi ...
- java并发笔记之java线程模型
警告⚠️:本文耗时很长,先做好心理准备 java当中的线程和操作系统的线程是什么关系? 猜想: java thread —-对应-—> OS thread Linux关于操作系统的线程控制源码: ...
- web设计_9_CSS常用布局,响应式
一个完整的页面和其中的组件该如何具备灵活性. 怎么样利用CSS来实现无论屏幕.窗口以及字体的大小如何变化,都可以自由扩展和收缩的分栏式页面. 要决定使用流动布局.弹性布局还是固定宽度的布局,得由项目的 ...