关于width，offsetwidth，scorllwidth

width:对象的宽度

offsetwidth ：对象包括滚动条border的宽度，会随对象显示大小的变化而改变。

scrollWidth:对象的宽度，会随着可视区大小改变

clientWidth是内容可视区的宽度。

offsetLeft:对象包括border在内的边距。scrollHeight: 对象的滚动高度。

scrollLeft:对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:对象的滚动宽度

offsetHeight:对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetTop:对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

时间： 2024-12-22 18:09:57

关于width，offsetwidth，scorllwidth的相关文章

关于对象的 width offsetwidth availWidth scrollHeight

别人总结的.自己记不住,所以留着了 offsetWidth 包含了对象的边线的宽度width 若你不在html 代码里明确指定这个值,那它的返回值会不一样,如果设置了width 则一样. widht 返回的是 30px ,offsetWidth是数字 30 . //在javascript中得到当前窗口的高和宽<body><SCRIPT LANGUAGE="JavaScript">var s = "";s += "\r\n网页可

CSSs width属性和offsetwidth属性深入理解

本人菜鸟一枚,趁着奥运期间,一边看奥运,一边学习,最近在慕课网学习前端技术,学习过程中有向很多前辈们博客学习,现在就来分享我的学习所得. 慕课网,导航条菜单的制作,使用javascript去制作伸缩菜单(水平方向上),下面是学习过程中的一个小插曲: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&quo

HTML: width,height

在进行前端页面开发时,width(width,offsetWidth,scrollWidth,clientWidth)height(height,offsetHeight,scrollHeight,clientHeight)是我们最容易搞混乱的这里就特别记录一下: 1.offsetWidth width+padding+border) 当前对象的宽度. style.width也是当前对象的宽度(width+padding+border). 区别:1)style.width返回值除了数字外还带有

0186 元素偏移量 offset 系列：offsetTop，offsetLeft，offsetWidth，offsetHeight，offset 与 style 区别，

1.1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpor

jQuery基础知识-函数（2）

选择网页元素 Tag : $('div') Class : $('.div') Id : $('#div') 设置网页元素 $('.div').css('background' , 'red') 选择网页元素 $('li:first').css('background', 'red') $('li:last').css('background', 'red') $('li:eq(2)').css('background', 'red') $('li:even').css('background'

js 和 jquery 里面几个获取宽高的调查

罗列下 js 和 jquery 里面获取宽高的方法: obj.offsetWidth = $obj.outerWidth() // offsetWidth obj.clientWidth = obj.scrollWidth // offsetWidth - border - scrollbar $obj.width() // offsetWidth - border - padding 基本是这样(当然测试的过程复杂得多,移动

Js实现截图功能

今日想试下弄个截图功能,在网上找了些资料,终于把它实现了,步骤如下: 首先要准备4个js文件: 1)prototype.js var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } }} var Extend = function(destination, source) { for (var property in source) { destination

transform布局不会脱离文档流

transform布局不会脱离文档流 transform布局不会脱离文档流,也不改变文档流的大小和位置. width offsetWidth clientWidth offsetLeft ... 设置元素的 transform 属性后,上述等属性均不会发生改变 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compat

PC端网页特效

元素偏移量offset系列 offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移),大小等获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度) 注意:放回的数值都不带单位 offset系列常用属性 offset系列属性作用 element.offsetParent 返回作为该元素带有定位的父级元素,如果父级都没有定位则返回body element.offsetTop 返回元素相对带有定位父元素上分的偏移 element.offsetLe

05webApis

学习目标: 能够说出常见 offset 系列属性的作用能够说出常见 client 系列属性的作用能够说出常见 scroll 系列属性的作用能够封装简单动画函数 1.1. 元素偏移量 offset 系列 1.1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位 <!DOCTYPE html> <html