c语言中width获取窗体宽度,获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别...
基本介绍
$(window).width()与$(window).height()
$(window).width()与$(window).height():获得的是屏幕可视区域的宽高,不包括滚动条与工具条。
$(window).width() = width + padding
$(window).height() = height + padding
document.documentElement.clientWidth与document.documentElement.clientHeight
document.documentElement.clientWidth与document.documentElement.clientHeight:获得的是屏幕可视区域的宽高,不包括滚动条与工具条,跟jquery的(window).width()与(window).height()获得的结果是一样的。
document.documentElement.clientWidth = width + padding
document.documentElement.clientHeight = height + padding
window.innerWidth与window.innerHeight
window.innerWidth与window.innerHeight:获得的是可视区域的宽高,但是window.innerWidth宽度包含了纵向滚动条的宽度,window.innerHeight高度包含了横向滚动条的高度(IE8以及低版本浏览器不支持)。
window.innerWidth = width + padding + border + 纵向滚动条宽度
window.innerHeight = height + padding + border + 横向滚动条高度
window.outerWidth与window.outerHeight
window.outerWidth与window.outerHeight:获得的是加上工具条与滚动条窗口的宽度与高度。
window.outerWidth = width + padding + border + 纵向滚动条宽度
window.outerHeight = height + padding + border + 横向滚动条高度 + 工具条高度
document.body.clientWidth与document.body.clientHeight
document.body.clientWidth与document.body.clientHeight:document.body.clientWidth获得的也是可视区域的宽度,但是document.body.clientHeight获得的是body内容的高度,如果内容只有200px,那么这个高度也是200px,如果想通过它得到屏幕可视区域的宽高,需要样式设置,如下:
body {
height: 100%;
overflow: hidden;
}
body, div, p, ul {
margin: 0;
padding: 0;
}
最关键的是:body的height:100%影响document.body.clientHeight的值。
body的margin:0,padding:0影响document.body.clientWidth的值。
offsetWidth & offsetHeight
返回本身的宽高 + padding + border + 滚动条
offsetLeft & offsetTop
所有HTML元素拥有offsetLeft和offsetTop属性来返回元素的X和Y坐标
1.相对于已定位元素的后代元素和一些其他元素(表格单元),这些属性返回的坐标是相对于祖先元素
2.一般元素,则是相对于文档,返回的是文档坐标
offsetParent属性指定这些属性所相对的父元素,如果offsetParent为null,则这些属性都是文档坐标
//用offsetLeft和offsetTop来计算e的位置
function getElementPosition(e){
var x = 0,y = 0;
while(e != null) {
x += e.offsetLeft;
y += e.offsetTop;
e = e.offsetParent;
}
return {
x : x,
y : y
};
}
scrollWidth & scrollHeight
这两个属性是元素的内容区域加上内边距,在加上任何溢出内容的尺寸.
因此,如果没有溢出时,这些属性与clientWidth和clientHeight是相等的。
scrollLeft & scrollTop
指定的是元素的滚动条的位置
scrollLeft和scrollTop都是可写的属性,通过设置它们来让元素中的内容滚动。
兼容性
1.window innerWidth 和 innerHeight 属性与outerWidth和outerHeight属性IE8以及以下不支持。
2.测试浏览器IE,火狐,谷歌,360浏览器,Safari都支持document.documentElement.clientWidth与document.documentElement.clientHeight。
结论
获取屏幕的可视区域的宽高可使用jquery的方式获得,也可以使用原生js获得,即:
document.documentElement.clientWidth与document.documentElement.clientHeight
c语言中width获取窗体宽度,获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别...相关推荐
- vue.js 获取当前屏幕的宽度_vue 获取屏幕宽高 width height
AngularJs 入门系列-2 表单验证 对于日常的开发来说,最常见的开发场景就是通过表单编辑数据,这里涉及的问题就是验证问题. angularjs 内置已经支持了常见的验证方式,可以轻松实现表单验 ...
- vue封装的 全屏js 禁止键盘事件 获取当前浏览器类型 获取当前的屏幕宽高
开启全屏 export function fullScreen(){var el = document.documentElement,rfs = el.requestFullScreen || el ...
- C语言中time函数和localtime获取系统时间和日期
C语言中time函数和localtime获取系统时间和日期 可以通过time()函数来获得计算机系统当前的日历时间(Calendar Time),处理日期时间的函数都是以本函数的返回值为基础进行运算. ...
- js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法)
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...
- 移动端获取当前屏幕的高度_手机移动端屏幕宽高详解
### 前因 目前的移动端布局,以响应式布局居多,以适应在不同分辨率的屏幕,实现布局的方式可能有很多种,但是不管使用哪种方式,获取设备的可用宽高就能为问题的关键. ### 宽高的获取 "` ...
- Android 获取屏幕宽高的正确姿势
前言 在开发时,我们经常需要根据屏幕的宽高来进行对view的适配,无论是自定义view还是andorid自带的一些控件,比如说需要占当前屏幕高度的30%,就需要获取到屏幕的宽高,但在获取宽高时我遇到了 ...
- 动态获取手机屏幕宽高及动态设置控件宽高
1.获取手机屏幕宽高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetr ...
- android获取屏幕宽高与获取控件宽高
1.获取屏幕宽高 方法1: int screenWidth = getWindowManager().getDefaultDisplay().getWidth(); // 屏幕宽(像素,如:480px ...
- android获取该控件在屏幕,android获取屏幕宽高与获取控件宽高(三种方法)
1.获取屏幕宽高 方法1: int screenWidth = getWindowManager().getDefaultDisplay().getWidth(); // 屏幕宽(像素,如:480px ...
最新文章
- Windows DDK介绍,选择和安装
- 电脑登陆不了网页的服务器地址,电脑能登qq不能打开网页的解决方法
- Android开发之Fragment与Activity的数据交互通过回调机制实现(源代码分享)
- Flex 学习笔记 动态设置itemRenderer
- css技巧之如何实现ul li边框重合
- QT5生成可执行文件总结
- 计算机模拟多孔碳,多孔碳材料分子设计的三种方法
- 某机器字长8位,试用如下所给芯片设计一个存储器,容量为10KW,其中RAM为高8KW,ROM为低2KW,最低地址为0(RAM芯片类型为:4K×8。ROM芯片为:2K×4)。
- OpenGL Lighting models照明模型的实例
- Win Api 有名管道通信--扫雷辅助(四)
- tensorflow 之 最近用到的几个小操作tf.reshape,tf.convert_to_tensor,tf.where
- unet训练自己的数据集_基于UNet网络实现的人像分割 | 附数据集
- 大厂Java初级开发工程师!!!面试必问项之Set实现类:TreeSet
- android listview高级,Android 高级控件笔记-列表视图ListView 基本适配器BaseAdapter
- 编译linux内核适用的编译器,编译Linux内核时,CC,LD和CC [M]输出的代码是什么?...
- 用 powershell 脚本 .ps1 写一个自动化的「编译->链接->运行C++文件」脚本
- 计算机一级win7操作题,计算机等级考试一级WIN7操作题.docx
- mysql查询字段最大的一条数据类型_SQL查询一个表中类别字段中Max()最大值对应的记录...
- 开始创建第一个npm的微信小程序项目
- CH5202 自然数拆分Lunatic版【完全背包】