关于clientWidth scrollWidth offsetWidth的理解

本文转载自查看原文 2016-06-16 22:41 2126 JavaScript

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里了

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 scrollWidth, clientWidth, offsetWidth的区别 JS中关于clientWidth offsetWidth scrollWidth 等的含义 javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX 再谈 document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别 js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别 offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理 JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义 JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth