• clientWidth：元素可见区域的宽度  clientWidth=padding+width-滚动条
  • scrollWidth：元素实际内容的宽度 scrollWidth=padding+width（元素实际的内容）
  • offsetWidth：元素可见区域的宽度+边框 offsetWidth=border+width+padding

代码设置

textarea{
    border: 5px solid red;
    width: 200px;
    height: 200px;
    padding: 5px;
}
在内容没有超出可视区域的时候
        clientWidth=5+200+5
        scrollWidth=5+200+5
        offsetWidth=5+5+200+5+5

在内容超出可视区域的时候
        clientWidth=5+200+5
        scrollWidth=5+实际宽度+5
        offsetWidth=5+5+200+5+5

在练习中遇见的问题

   没有在文档最上面加<!DOCTYPE html>

textarea被浏览器设置成默认属性  有box-sizing:border-box属性，宽高被固定  padding和border都被包含在width里了



												


											
关于clientWidth scrollWidth offsetWidth的理解的更多相关文章
	

    
								
  1. DOM元素尺寸和位置(clientwidth ,scrollwidth , offsetwidth.......)
		
    [1] slientWidth 和 sclientHeight slientWidth:获取的是可视宽度 slientHeight:获取的是可视高度 <html> <head> ...
    
		
    2. 
						
  2. JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
		
    常用: JS 获取浏览器窗口大小   // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...
    
		
    3. 
						
  3. 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异
		
    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
    
		
    4. 
						
  4. scrollWidth,clientWidth与offsetWidth的区别
		
    scrollWidth  是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度). clientWidth  是对象可见的宽度,不包滚动条等边线,会随窗口的显 ...
    
		
    5. 
						
  5. js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别
		
    js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox ...
    
		
    6. 
						
  6. offsetWidth clientWidth scrollWidth 的区别
		
    了解 offsetWidth clientWidth scrollWidth 的区别 最近需要清除区分开元素的width,height及相应的坐标等,当前这篇用来区分offsetWidth clien ...
    
		
    7. 
						
  7. 【clientX，offsetX，screenX】  【scrollWidth，clientWidth，offsetWidth】的区别
		
    一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clie ...
    
		
    8. 
						
  8. clientWidth、offsetWidth等介绍
		
    网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...
    
		
    9. 
						
  9. clientHeight & clientWidth & offsetHeight & offsetWidth & outerWidth & innerWidth & outerWidth & outerHeight
		
    clientHeight & clientWidth & offsetHeight & offsetWidth MDN https://developer.mozilla.or ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Floyd算法的理解
			
    
			
    2. 
						
  2. poj1703Find them, Catch them（并查集以及路径压缩）
			
    /* 题目大意:有两个不同的黑帮,开始的时候不清楚每个人是属于哪个的! 执行两个操作 A a, b回答a, b两个人是否在同一帮派,或者不确定 D a, b表示a, b两个人不在同一个帮派 思路:利用 ...
    
			
    3. 
						
  3. 提高性能：用RequireJS优化Wijmo Web页面
			
    上周Wijmo 2014 V2版本刚刚发布(下载地址),  有网友下载后发现仅仅使用了40个Widgets的一小部分,还需要加载全部的jquery.wijmo-pro.all.3.20142.45.m ...
    
			
    4. 
						
  4. Java多线程系列--“JUC线程池”03之 线程池原理(二)
			
    概要 在前面一章"Java多线程系列--“JUC线程池”02之 线程池原理(一)"中介绍了线程池的数据结构,本章会通过分析线程池的源码,对线程池进行说明.内容包括:线程池示例参考代 ...
    
			
    5. 
						
  5. spring 源码分析之BeanPostProcessor
			
    1.官方解答: Factory hook that allows for custom modification of new bean instances, e.g. checking for ma ...
    
			
    6. 
						
  6. Dapper的基本使用
			
    Dapper是.NET下一个micro的ORM,它和Entity Framework或Nhibnate不同,属于轻量级的,并且是半自动的.也就是说实体类都要自己写.它没有复杂的配置文件,一个单文件就可 ...
    
			
    7. 
						
  7. SQL Server逻辑读、预读和物理读
			
    SQL Server数据存储的形式 预读:用估计信息,去硬盘读取数据到缓存.预读100次,也就是估计将要从硬盘中读取了100页数据到缓存. 物理读:查询计划生成好以后,如果缓存缺少所需要的数据,让缓存 ...
    
			
    8. 
						
  8. javascripts学习笔记（五）：用js来实现缩略语列表、文献来源链接和快捷键列表。
			
    1 缩略语列表问题出发点:一段包含大量缩略语的文本,例如: <p> The <abbr title="World Wide Web Consortium"> ...
    
			
    9. 
						
  9. 如何做好一个ORM框架
			
    很多人都不太认可以第三方ORM,因为考虑的点不够全面,没有用户群体大的ORM有保证,这点是不可否认确是事实. 但是往往用户群体大的ORM又有不足之处,就拿用户群体最多的两个ORM来说一下吧 1.EF  ...
    
			
    10. 
						
  10. Android Studio快捷键每日一练（6）
			
    原文地址:http://www.developerphil.com/android-studio-tips-of-the-day-roundup-6/ 51.重构代码 苹果:Ctrl+T    Win ...
    
			
    11.