js/jQuery中的宽高

一、和window有关的宽高

window.innerWidth:浏览器窗口宽度

window.innerHeight:浏览器窗口高度（不包括导航，工具栏等的高度）

window.outerWidth:浏览器窗口宽度（很多时候===window.innerWidth）

window.outerHeight:浏览器窗口高度（包括导航，工具栏等的高度）

window.screen.width:用户设备屏幕的宽度

window.screen.height:用户设备屏幕的高度

window.screen.availWidth:

window.screen.availHeight:

window.screenTop:浏览器距离屏幕顶部高度

window.screenLeft:浏览器距离屏幕左侧宽度

二、client有关宽高

clientWidth、clientHeight: padding+content 如果有滚动条 再减去滚动条宽度/高度

clientTop:等于border-top的width

clientLeft:等于border-left的width

三、offset相关宽高

offsetHeight，

offsetWidth 等于border+padding+content;与内容是否超出原设定宽高无关，与是否有滚动轴无关

offsetLeft:相对于定位父级（offsetParent）元素左侧距离；offsetParent的margin-left+offsetParent的border-left宽度+当前元素的margin-left

offsetTop:相对于定位父级（offsetParent）元素左侧距离；

四、与scroll相关的宽高

scrollLeft,被滚动条隐藏部分的宽度

scrollTop: 被滚动条隐藏部分的高度

scrollWidth：内容的全部实际宽度，当内容不超过可视区域的时候=clientWidth

scrollHeight：内容的全部实际高度，当内容不超过可视区域的时候clientHeight

五documentElement与body的关系

document(nodetype=9,nodeName=#docuemnt)——>documentElement(nodeType=1,nodeName=html)——>body(nodeType=1,nodeName=body)

documentElement是body的父元素

时间： 2024-10-03 01:30:40

js/jQuery中的宽高的相关文章

第76天：jQuery中的宽高

Window对象和document对象的区别 1.window对象表示浏览器中打开的窗口 2.window对象可以省略,比如alert()也可以写成window.alert() Document对象是window对象的一部分 浏览器的HTML文档成为dicument对象 Window.location和document.location Window对象的location属性饮用的是location对象,表示该窗口中当前显示文档的URL Document对象的location属性也是引用了loc

js获取隐藏元素宽高的方法

网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo

写个js动态调整图片宽高 （原创）

<body style="TEXT-ALIGN: center;"> <div id="testID" style="background:red;MARGIN-RIGHT: auto; MARGIN-LEFT: auto; width:173;height:184"> <img src="http://e.hiphotos.baidu.com/image/pic/item/024f78f0f736afc3

前端 JS 获取 Image 图像 宽高 尺寸

前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在图片数量较多的时候,这样的获取效率实在是低下.所有就有了这篇文章.通过直接读取解析文件的字节码来获取图片的尺寸. IMAGE_HEAD_SIGS var IMAGE_HEAD_SIGS = { GIF: [0x47, 0x49, 0x46], //'G' 'I' 'F' ascii PNG: [0x

js中各种宽高

各种宽高 Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度FireFox中:document.body.clientWidth ==> BODY对象宽度

js获取屏幕元素宽高值

屏幕分辨率的宽高:window.screen.width  / window.screen.height 屏幕可用工作区宽高:window.screen.availWidth / window.screen.availHeight 网页可见区域宽高:document.body.clientWidth / document.body.clientHeight 网页可见区域宽高:document.body.offsetWidth / document.body.offsetHeight(包括边线)

js 获取屏幕各种宽高的方法

屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网

js/jquery中实现图片轮播

一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片轮播 jq(左右切换)</title> <style type="text/css">   body,div,ul,li,a,

JS快速获取图片宽高的方法

快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器.一.简陋的获取图片方式 // 图片地址 后面加时间戳是为了避免缓存 var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new I