关于clientWidth scrollWidth offsetWidth的理解

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

时间： 2024-10-13 12:36:07

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

DOM元素尺寸和位置(clientwidth ,scrollwidth , offsetwidth.......)

[1] slientWidth 和 sclientHeight slientWidth:获取的是可视宽度 slientHeight:获取的是可视高度 <html> <head> <style> .div1{ width:50px; height:50px; overflow:scroll; //设置滚动条 } </style> </head> <body> <div id="div" class="

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口高度 if (windows.innerHeight) winHeight = windows.innerHeight; el

scrollWidth,clientWidth与offsetWidth的区别

scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度). clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变. offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变. 一个scrollWidth和clientWidth的例子: <html> <head> <title>77.htm文件</title> </hea

JS：body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft

document.body.clientWidth 获取body元素对象的内容可视区域的宽度,即clientWidth=width+padding,不包括滚动条. document.body.clientHeight 获取body元素对象的内容可视区域的高度,即clientHeight=height+padding,不包括滚动条. 浏览器兼容性在IE7中,如果给body设置滚动条的话,滚动条是出现在body内部的.所以当给body设置width和height时,在IE7中clientWidth

【clientX，offsetX，screenX】【scrollWidth，clientWidth，offsetWidth】的区别

一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条. offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标. offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标. screenX 设置或获取获取鼠标指针位置相对于用

offsetWidth clientWidth scrollWidth 的区别

了解 offsetWidth clientWidth scrollWidth 的区别最近需要清除区分开元素的width,height及相应的坐标等,当前这篇用来区分offsetWidth clientWidth scrollWidth的区别各自的概念假设有一个元素,width有以下几个进行组合 content padding-left padding-right scrollbar 垂直的滚动条宽度(假设有,没有便为0) border-left border-right clientWid

js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别

js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox等. 一.测试1:无滚动条时,dom对象的offsetWidth.clientWidth和scrollWidth (1)测试代码 <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset=&q

clientWidth、offsetWidth等介绍

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

scrollWidth,offsetWidth,clientWidth,width;scrollHeight,offsetHeight,clientHeight,height;offsetTop,scrollTop,top;offsetLeft,scrollLeft,left还有谁

题中的那么多属性让人头都大了,他们到底是什么意思?不同浏览器的实现是一样的吗?以下所有结论来自chrome版本 53.0.2785.89 (64-bit)和firefox版本52.0.2,操作系统ubuntu16.04的测试,关于IE及其它浏览器并没有考虑. 一.谈谈XXWidth 1.width 这个是style对象的一个属性,跟你在css样式里写的那个width的值是一样的,注意他是带单位的. <!DOCTYPE html> <html lang="en">