各种元素视窗宽高及其可读性总结

clientTop //元素自身的边框宽度

clientLeft

clientWidth  //元素自身的宽度，包含内边距但  不包含外边距和边框

clientHeight

offsetTop  //距离浏览器的顶部的高度，不包括工具栏等，但包含浏览器的默认内边距和元素的外边距（列如chorome的默认内边距是8）

offsetLeft //距离浏览器边的宽度，包含浏览器的默认内边距和元素的外边距

offsetWidth   //标准浏览器下的和模型的宽度：边框宽度+内边距宽度+内容宽度

offsetHeight  //同上

//innerTop

//innerLeft

//innerWidth

//innerHeight

//pageXOffset

//pageYOffset

时间： 2024-08-01 18:07:47

各种元素视窗宽高及其可读性总结的相关文章

jquery获取元素各种宽高及页面宽高总结

window.onload=function(){ var a = $("#div").width(),//width()返回元素的宽高,不包括padding/border/margin b = $("#div").innerWidth(),//innerWidth()返回元素的宽高 + padding c = $("#div").outerWidth(),//outerWidth()返回元素的宽高 + padding + border d =

给内联元素设置宽高的几种方式

内联元素默认不能设宽高,其宽高由其内容自动撑开 让内联元素具有宽高属性的几种方式 1,给内联元素转换成块级元素或内联块级元素 block或inline-block 2,让内联元素脱离文档流,比如绝对定位.固定定位或浮动 span{ width:3rem; height:100%; float:left; }

隐藏元素的宽高无法通过原生js获取的问题

1.起源:移动app项目中,页面加载时需要加载国家下拉列表,将隐藏的透明浮层和一个显示加载过程中的框 显示出来,隐藏的透明浮层设置宽高都是100%即可,而这个加载提示框需要先得出它的宽高,然后再根据页面的宽高计算它的绝对定位的left和top 2.用js获取该元素的宽高,结果都是0,该元素的css代码如下,因为display:none隐藏元素不占位置,所以宽高都为0,而用jQuery$("#loadImg").height()能获取到,通过网上查资料,是说jquery的这种获取方式是通

块级元素和内联元素的宽高是如何确定的

在刚接触CSS的时候,每次给元素添加样式,都习惯性的写上宽是多少,高是多少,为自己挖坑无数,还暗自抱怨说CSS好烦,不过它真的是好烦,脾气很怪. 好,言归正传.在讨论元素的宽高是如何确定的之前,我们先明确一下文档流的概念:对于内联元素,是从左到右排列的,当宽度不够时换行:对于块级元素,是从上到下排列的,每一个元素都另起一行. 一.内联元素宽高的确定 宽度:不受width的限制,有文字内容决定的,padding 和 margin 可以改变宽度. 高度:不受height的限制,padding 和ma

jquery获取元素各种宽高及页面宽高

如何使用jquery来获取网页里各种高度? 示例如下: 1 $(document).ready(function(){ 2 var divWidth = $("#div").width(),//width()返回元素的宽高,不包括padding/border/margin 3 divInnerWidth = $("#div").innerWidth(),//innerWidth()返回元素的宽高 + padding 4 divOuterWidth = $("

如何获取设置display:none元素及子元素的宽高

由于元素设置了display:none时,页面便不会对其渲染,导致无法获取其元素的宽高.目前一般的做法都是先对其设置display:block,拿到数据再设置其为display:none.如此便可以了 代码 如何获取 id="ul" 元素的宽高??? html <section class="section none"> <div> <ul id="ul"> <li>第 <span class

设置canvas元素的宽高的奇妙（jiujie）发现

大家都知道设置一块画布的大小 我们可以这样: <canvas id="canvas" width="600" height="300"> </canvas> 也可以通过css进行设置 #canvas{ width:600px; height:300px; } 我这样写: 效果是这样: 可当我在css上也写上同样的尺寸并把canvas元素行内宽高去掉的时候..... hellow变的贼大..明明都是一样的尺寸. 好吧,其实:

CSS中定位和浮动对行内元素的宽高的影响

行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者position:fixed或者使用float属性时,width和height的设置能起作用. 因为在以上三种情况下,行内元素的display从inline变为block <style> span{ background-color:red; width:100px; height:100px; float

获取元素的宽高和位置（转自脚本之家）

offsetTop 指元素距离上方或上层控件的位置,整型,单位像素. offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素. offsetWidth 指元素控件自身的宽度,整型,单位像素. offsetHeight 指元素控件自身的高度,整型,单位像素. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页