（知识）width、naturalWidth、clientWidth、offsetWidth区别整理

【（知识）width、naturalWidth、clientWidth、offsetWidth区别整理】的更多相关文章

（知识）width、naturalWidth、clientWidth、offsetWidth区别整理

今天在做图片裁剪功能的时候,参考了下网友的资料,发现大家对图片宽度的获取方式不尽相同,于是详细整理下各个属性的区别(详细请参考MDN). 1,HTMLImageElement.width是一个unsigned long 类型反映了 widthHTML 属性, 说明图像在CSS像素中渲染的宽度. 2,HTMLImageElement.naturalWidth返回一个 unsigned long 类型,表明图像在CSS像素中固有的宽度,如果可用的话: 否则, 返回0. 3,Element.clien…

JS中关于clientWidth offsetWidth scrollWidth 的区别及意义

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: documen…

JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义

JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度: 如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来,即获得包括外边框(margin).内边界(padding)和边框(border)的元素宽度. 同理,innerHeight方法与outerHeight方法也是用同样的方法计算相应…

clientWidth,offsetWidth,scrollWidth区别

<html> <head> <title>clientWidth,offsetWidth,scrollWidth区别</title> </head> <body> <textarea wrap="off" onfocus="alert('offsetWidth:'+this.offsetWidth+'scrollWidth:'+this.scrollWidth+'\n clientWidth:'+t…

H5,PC网页屏幕尺寸相关整理(scrollLeft,scrollWidth,clientWidth,offsetWidth)

HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 o…

JS中关于clientWidth offsetWidth scrollWidth 等的含义

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: documen…

JS中关于clientWidth offsetWidth srollWidth等的含义

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: documen…

js中的clientWidth offsetWidth scrollWidth等的含义

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: documen…

clientWidth offsetWidth scrollWidth

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: documen…

JS中关于clientWidth offsetWidth scrollWidth 等的含义的详细介绍

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: documen…

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:…

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度…

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释

HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗体中眼下可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗体中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度o…

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详细的说明

HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth具体指完全解释究竟哪里的距离scrollHeight: 获取对象的高度滚动. scrollLeft:设置或获取位于对象左边界和窗体中眼下可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗体中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offs…

转 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度…

CSS width：100%和width：auto的区别

width:100%和width:auto的区别 width:auto比较聪明,如果margin已经左右占去10px的空间,那么width给的值就是580px. <style> div{ width:600px; overflow:auto; background:#ccc; } p{ width:auto; margin:10px; background:red; } </style> </head> <body> <div> <p>…

scrollLeft,scrollWidth,clientWidth,offsetWidth 可实现导航栏固定不动（冻结）的效果

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offse…

IHttpModule与IHttpHandler的区别整理

IHttpModule与IHttpHandler的区别整理1.先后次序.先IHttpModule,后IHttpHandler. 注:Module要看你响应了哪个事件,一些事件是在Handler之前运行的,一些是在Handler之后运行的2.对请求的处理上:IHttpModule是属于大小通吃类型,无论客户端请求的是什么文件,都会调用到它;例如aspx,rar,html的请求.IHttpHandler则属于挑食类型,只有ASP.net注册过的文件类型(例如aspx,asmx等等)才会轮到调用它.3…

scanf,fscanf,sscanf的区别----整理

转自原文 scanf,fscanf,sscanf的区别----整理 scanf 从控制台输入 fscanf 从文件输入 sscanf 从指定字符串输入 1.例:使用scanf函数输入数据. #include<stdio.h> int main() { int a,b,c; printf("输入 a, b, c\n"); scanf("%d,%d,%d", &a, &b, &c); printf("a = %d b = %…

width:auto 和 width:100%有什么区别

width:auto 和 width:100%有什么区别宽度计算不同 <div class="parent"> <span class="child">content</span> </div> .parent { width: 800px; } 当子元素 width: auto; 时 width: auto = 'width' + 'padding-left/right' + 'border-left/right'…

Javascript:scrollWidth,clientWidth,offsetWidth的区别（转）

网页可见区域宽:document.body.clientWidth; 网页可见区域高:document.body.clientHeight; 网页可见区域高:document.body.offsetWeight: 网页可见区域高:document.body.offsetHeight; 网页正文全文宽:document.body.scrollWidth; 网页正文全文高:document.body.scrollHeight; 网页被卷去的高:document.body.scrollTop; 网页被…

转：scrollWidth,clientWidth,offsetWidth的区别

scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变. 该demo就在页面中放一个textarea元素,采用默认宽高显示. 情况1: 元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下. scrollWidth=clientWidth,两者皆为内容可视区的宽度…

offsetwidth/clientwidth的区别

clientWidth是对象看到的宽度(不含边线,即border)scrollWidth是对象实际内容的宽度(若无padding,那就是边框之间距离,如有padding,就是左padding和右padding之间距离).offsetWidth是指对象自身的宽度,整型,单位像素(含边线,如滚动条的占用的宽,值会随着内容的输入而不断改变). scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获…

width，clientWidth，offsetWidth

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> window.onload = function() { var oDiv = document.getElementById('…

css3: scrollLeft,scrollWidth,clientWidth,offsetWidth 的区别

(需要提一下:CSS中的margin属性,与clientWidth.offsetWidth.clientHeight.offsetHeight均无关) offsetwidth:是元素相对父元素的偏移宽度.等于border+padding+widthclientwidth:是元素的可见宽度.等于padding+widthscrollwidth:是元素的宽度且包括滚动部分.offsetLeft:Html元素相对于自己的offsetParent元素的位置 scrollLeft:返回和设置当前横向滚动务…

JS中关于clientWidth offsetWidth scrollWidth 等的区别

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrollHeight;网页被卷去的高: documen…

scrollWidth,clientWidth,offsetWidth的区别

通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变. 该demo就在页面中放一个textarea元素,采用默认宽高显示. 情况1: 元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下. scrollWidt…

clientX、pageX、scrollLeft、offsetLeft、clientWidth、screen.width的用法和区别

一.定义和用法 1.event.clientX:事件对象的水平偏移量: event.clientY:事件对象的垂直偏移量: 2.event.pageX:事件对象加上滚动距离后的水平偏移量: event.pageY:事件对象加上滚动距离后的垂直偏移量: 3.$(selector).scrollLeft(offset):获得或设置对象的滚动水平位置: $(selector).scrollTop(offset):获得或设置对象的滚动垂直位置: 4.div.offsetLeft:对象的水平偏移量: di…

web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别

通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变. 该demo就在页面中放一个textarea元素,采用默认宽高显示. 情况1: 元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下. scrollWidth=…

scrollWidth,clientWidth,offsetWidth的区别 ---转载的

转载自博客:http://www.cnblogs.com/kongxianghai/p/4192032.html 通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变. 该demo就在页面中放一个textarea元素,采用…