码迷,mamicode.com
首页 > 其他好文 > 详细

关于clientWidth scrollWidth offsetWidth的理解

时间:2016-06-16 23:19:28      阅读:338      评论:0      收藏:0      [点我收藏+]

标签:

 

  • 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的理解

标签:

原文地址:http://www.cnblogs.com/supershare/p/5592372.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!