数码资讯
Javaｓｃｒｉｐｔ获取元素大小和大小操作
1。获取元素的内部样式 复制代码代码如下所示： var obj = document.getelementbyid（测试）； 警报（obj.height + + obj的宽度）； 200px typeof =字符串 / / 200px在样式属性值显示 两。获得计算风格 复制代码代码如下所示： var
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
1。获取元素的内部样式
复制代码代码如下所示：
var obj = document.getelementbyid（测试）；
警报（obj.height + + obj的宽度）；
200px typeof =字符串 / / 200px在样式属性值显示
两。获得计算风格
复制代码代码如下所示：
var obj = document.getelementbyid（测试）；
var样式= null；
如果（窗口。getcomputedstyle）{
style= window.getcomputedstyle（obj，null）； / / IE
{人}
style= obj.currentstyle； / / IE
}
警报（width=+ style.width + 高度= +样式。高度）；
注意：如果没有设置元素的宽度和高度，则默认的宽度和高度将在非IE浏览器下返回。
三，获取和标注的风格
复制代码代码如下所示：
var obj =文档样式表{ 0 }； / / {对象stylesheetlist }样式表数VAR规则= null； / / { CSSRule }
如果（obj。CSS规则）{
规则= obj。CSS规则{ 0 }；IE / {对象cssrulelist }
{人}
规则= obj。规则{ 0 }； / / IE对象cssrulelist } {
}
警报（规则，样式，宽度）；
CssRules（或规则）只能得到内联和链接方式的宽度和高度，并不能获得风格在线条、后计算。
总结：三CSS的方法得到的元素的大小只能得到该元素的CSS的大小，但不能获取的元素本身的实际大小。例如，添加内边缘、滚动条、边境，等等。
四。获取元素的实际大小
1。clientwidth和自己
这组属性可以得到该元素的可视面积的大小，和空间的大小通过元素的含量占内缘。元素的大小是回来了，但没有单位，默认的单位是像素，如果你设置了一个单元，如100em，它将返回PX的大小。（CSS得到它，当你设定你的风格），该元件的实际尺寸，clientwidth和自己了解以下方面：
增加边界，没有变化；
增加外边缘没有变化。
C.添加了滚动条，最终值等于原始大小减去滚动条的大小。
增加内边缘，最后值等于原始尺寸和内缘的大小。
复制代码代码如下所示：
#测试{
背景颜色：绿色；
宽度：200px；
身高：200px；
边境：固体5px红； / *相应的理解，结果：200200。
保证金：10px B； / *理解对应的结果：200200× /
填料：20px C； / *理解对应的结果：240240× /
溢位：滚动D；*相应的理解结果：223223223 = 200（大小CSS）+ 40（边填充）- 17（滚动宽度）。
}
在window.onload =函数（）{
var obj = document.getelementbyid（测试）；
警报（obj.clientwidth +
}；
注意：如果任何CSS没有设置宽度和高度，然后将计算非IE浏览器的滚动条和内缘计算尺寸的大小，而IE浏览器将返回0（IE8已经修复）。
2。scrollwidth和scrollheight
这组属性可以滚动的内容的元素的大小（可见内容）。元素的大小返回，和默认的单位是像素。如果任何CSS没有设置宽度和高度，宽度和高度的计算得到的元素实际。大小，scrollwidth和scrollheight了解以下：
1。添加边框，不同的浏览器有不同的解释（在IE8下面运行正常，IE6运行不正常）：
一）Firefox和Opera浏览器将增加边框的大小，220x220
B）的IE浏览器，Chrome和Safari浏览器会忽略边界的大小，种
c）IE浏览器只显示其原始内容的高度，200x18（IE8已经改变的问题）
2。增加内部边缘，最终值将等于原来的大小加上内缘，大小220x220大小，即是220x38
三.添加滚动条，最终值将等于原尺寸减去滚动条，184x184大小，即是184x18
4。增加外部基础，不改变。
5、增加内容溢出。Firefox，Chrome和IE获得实际的内容高度。Opera比前三个浏览器小得多。Safari比前三浏览器高。
三.offsetwidth和offsetheight
这组属性可以返回元素的实际尺寸，包括边框，内边缘，和滚动条。元素的大小返回，和默认的单位是像素。如果没有设置任何CSS的宽度和高度，宽度和高度的计算，将得到的。对元件的实际尺寸，offsetwidth和offsetheight了解以下：
1。添加边框，最终值将等于原始大小的大小加上边框的大小，到220；
2。增加内边缘，最终值将等于原始尺寸的大小加上内缘的大小，到220；
三.增加外部基础，不改变；
4。增加轧制带，不改变，不会减少。
元素大小的获取通常是块级（块）元素，更容易设置CSS元素的大小。如果是内联元素（内联）或不设置大小的元素，则特别麻烦，因此建议在使用时注意。
复制代码代码如下所示：
测试的div元素
#测试{
背景颜色：绿色；
宽度：200px；
身高：200px；
边境：固体10px红； / * * /结果：220220
结果：保证金：10px； / * * / 220220（没有变化）
结果：240240× / / * padding: 10px；
结果：溢出：滚动；240240（无变化）
}
在window.onload =函数（）{
var obj = document.getelementbyid（测试）；
警报（obj.offsetwidth +
}；
五。获取元素的大小
1。clientleft和clienttop得到边框的大小
这套性能可以得到元素设置左边框的大小和边界上。目前，只有左上和右下方提供，不提供。如果这四边的宽度是不同的，它可以通过计算的方式直接获得，或者通过以上三组减法得到的单元尺寸。
在右边框宽度：obj.offsetwidth-obj.clientwidth-obj.clientleft
底部边框宽度：obj.offsetheight-obj.clientheight-obj.clienttop
复制代码代码如下所示：
测试的div元素
#测试{
背景颜色：绿色；
宽度：200px；
身高：200px；
边境上的固体10px红；
边境：固体20px # 00ff00；
底部边框：固体30px蓝；
左边界：固体40px # 808080；
}
在window.onload =函数（）{
var obj = document.getelementbyid（测试）；
警报（obj.clientleft + obj.clienttop + ）； / / 40,10
}；
2。offsetleft和offsettop
这组属性可以获得当前元素相对于父元素的位置。获取元素的位置目前与父元素相对，最好将其设置为绝对位置；否则，不同的浏览器将有不同的解释。
a，将位置设置为绝对值，所有浏览器返回相同的值：
复制代码代码如下所示：
测试的div元素
#测试{
背景颜色：绿色；
宽度：200px；
身高：200px；
位置：绝对；
左：30px；
上图：20px；
}
在window.onload =函数（）{
var obj = document.getelementbyid（测试）；
警报（obj.offsetleft + obj.offsettop + ）； / / 30, 20
}；
B，加上边框和填充物不会影响它的位置，但是加号根据累加。
3、box.offsetparent获取父元素
在offsetparent，如果父元素，非即回体对象，和IE（IE6）返回HTML对象。如果两个元素是嵌套的，如果上offsetparent父元素不使用位置回归身体的物体或HTML对象：absolute.so，当你offsetleft和offsettop，CSS的位置是非常重要的。
如果在多个层次上，外层已经定位，我们如何获得内层元素与主体或HTML元素之间的距离即从页面获取任何元素距离的位置。然后我们可以写一个函数，累的直飞Calais的背。
复制代码代码如下所示：
box.offsettop + box.offsetparent.offsettop； / /只有两层。
功能offsetleft（元）{
VaR左= element.offsetleft； / /得到第一层的距离
VaR母= element.offsetparent； / /先母元
而（父母）！=如果有一个父元素的层
左= parent.offsetleft； / /层积累的距离
母= parent.offsetparent； / /得到父元素层
然后继续循环。
返回左；
}
4.scrollTop and scrollLeft
这组属性可以得到隐藏的滚动条的面积大小（滚动条上方的区域），也可以设置到该区域。如果你想滚动滚动条到初始位置，你可以写一个函数：
复制代码代码如下所示：
功能scrollstart（元）{
如果（element.scrolltop！= 0）{
element.scrolltop = 0；
}
}
5、getboundingclientrect（）
此方法返回一个矩形对象，该对象包含四个属性：左、顶、右和底。
复制代码代码如下所示：
VaR箱= document.getelementbyid（'box '）； / /获取元素
警报（盒。getboundingclientrect）（前）； / /距离以上的网页元素以上的距离
警报（盒。getboundingclientrect）（右）； / /正确的距离对页面元素的左侧
警报（盒。getboundingclientrect）（。底部）； / /距距离下面的页面元素
警报（盒。getboundingclientrect）（左）； / /左距离对页面元素的左侧
注：即Firefox3 +，opera9.5，Chrome和Safari的支持。在伊江，默认的坐标从（2,2），从而在最后两像素距离超过其他浏览器。我们需要兼容。
复制代码代码如下所示：
document.documentelement.clienttop；IE 0、IE 2
document.documentelement.clientleft；IE 0、IE 2
functionggetrect（元）{
VaR矩形= element.getboundingclientrect（）；
var = document.documentelement.clienttop；
左= document.documentelement.clientleft VaR；
返回{
上图：rect.top顶，
rect.bottom顶底，
左：左rect.left，
右：rect.right左
}
}
另外，分别根据边缘的内侧边缘，测试所有的浏览器边框和滚动条都是一样的。
以上是本文所描述的全部内容，希望合作伙伴能喜欢。
复制代码代码如下所示：
var obj = document.getelementbyid（测试）；
警报（obj.height + + obj的宽度）；
200px typeof =字符串 / / 200px在样式属性值显示
两。获得计算风格
复制代码代码如下所示：
var obj = document.getelementbyid（测试）；
var样式= null；
如果（窗口。getcomputedstyle）{
style= window.getcomputedstyle（obj，null）； / / IE
{人}
style= obj.currentstyle； / / IE
}
警报（width=+ style.width + 高度= +样式。高度）；
注意：如果没有设置元素的宽度和高度，则默认的宽度和高度将在非IE浏览器下返回。
三，获取和标注的风格
复制代码代码如下所示：
var obj =文档样式表{ 0 }； / / {对象stylesheetlist }样式表数VAR规则= null； / / { CSSRule }
如果（obj。CSS规则）{
规则= obj。CSS规则{ 0 }；IE / {对象cssrulelist }
{人}
规则= obj。规则{ 0 }； / / IE对象cssrulelist } {
}
警报（规则，样式，宽度）；
CssRules（或规则）只能得到内联和链接方式的宽度和高度，并不能获得风格在线条、后计算。
总结：三CSS的方法得到的元素的大小只能得到该元素的CSS的大小，但不能获取的元素本身的实际大小。例如，添加内边缘、滚动条、边境，等等。
四。获取元素的实际大小
1。clientwidth和自己
这组属性可以得到该元素的可视面积的大小，和空间的大小通过元素的含量占内缘。元素的大小是回来了，但没有单位，默认的单位是像素，如果你设置了一个单元，如100em，它将返回PX的大小。（CSS得到它，当你设定你的风格），该元件的实际尺寸，clientwidth和自己了解以下方面：
增加边界，没有变化；
增加外边缘没有变化。
C.添加了滚动条，最终值等于原始大小减去滚动条的大小。
增加内边缘，最后值等于原始尺寸和内缘的大小。
复制代码代码如下所示：
#测试{
背景颜色：绿色；
宽度：200px；
身高：200px；
边境：固体5px红； / *相应的理解，结果：200200。
保证金：10px B； / *理解对应的结果：200200× /
填料：20px C； / *理解对应的结果：240240× /
溢位：滚动D；*相应的理解结果：223223223 = 200（大小CSS）+ 40（边填充）- 17（滚动宽度）。
}
在window.onload =函数（）{
var obj = document.getelementbyid（测试）；
警报（obj.clientwidth +
}；
注意：如果任何CSS没有设置宽度和高度，然后将计算非IE浏览器的滚动条和内缘计算尺寸的大小，而IE浏览器将返回0（IE8已经修复）。
2。scrollwidth和scrollheight
这组属性可以滚动的内容的元素的大小（可见内容）。元素的大小返回，和默认的单位是像素。如果任何CSS没有设置宽度和高度，宽度和高度的计算得到的元素实际。大小，scrollwidth和scrollheight了解以下：
1。添加边框，不同的浏览器有不同的解释（在IE8下面运行正常，IE6运行不正常）：
一）Firefox和Opera浏览器将增加边框的大小，220x220
B）的IE浏览器，Chrome和Safari浏览器会忽略边界的大小，种
c）IE浏览器只显示其原始内容的高度，200x18（IE8已经改变的问题）
2。增加内部边缘，最终值将等于原来的大小加上内缘，大小220x220大小，即是220x38
三.添加滚动条，最终值将等于原尺寸减去滚动条，184x184大小，即是184x18
4。增加外部基础，不改变。
5、增加内容溢出。Firefox，Chrome和IE获得实际的内容高度。Opera比前三个浏览器小得多。Safari比前三浏览器高。
三.offsetwidth和offsetheight
这组属性可以返回元素的实际尺寸，包括边框，内边缘，和滚动条。元素的大小返回，和默认的单位是像素。如果没有设置任何CSS的宽度和高度，宽度和高度的计算，将得到的。对元件的实际尺寸，offsetwidth和offsetheight了解以下：
1。添加边框，最终值将等于原始大小的大小加上边框的大小，到220；
2。增加内边缘，最终值将等于原始尺寸的大小加上内缘的大小，到220；
三.增加外部基础，不改变；
4。增加轧制带，不改变，不会减少。
元素大小的获取通常是块级（块）元素，更容易设置CSS元素的大小。如果是内联元素（内联）或不设置大小的元素，则特别麻烦，因此建议在使用时注意。
复制代码代码如下所示：
测试的div元素
#测试{
背景颜色：绿色；
宽度：200px；
身高：200px；
边境：固体10px红； / * * /结果：220220
结果：保证金：10px； / * * / 220220（没有变化）
结果：240240× / / * padding: 10px；
结果：溢出：滚动；240240（无变化）
}
在window.onload =函数（）{
var obj = document.getelementbyid（测试）；
警报（obj.offsetwidth +
}；
五。获取元素的大小
1。clientleft和clienttop得到边框的大小
这套性能可以得到元素设置左边框的大小和边界上。目前，只有左上和右下方提供，不提供。如果这四边的宽度是不同的，它可以通过计算的方式直接获得，或者通过以上三组减法得到的单元尺寸。
在右边框宽度：obj.offsetwidth-obj.clientwidth-obj.clientleft
底部边框宽度：obj.offsetheight-obj.clientheight-obj.clienttop
复制代码代码如下所示：
测试的div元素
#测试{
背景颜色：绿色；
宽度：200px；
身高：200px；
边境上的固体10px红；
边境：固体20px # 00ff00；
底部边框：固体30px蓝；
左边界：固体40px # 808080；
}
在window.onload =函数（）{
var obj = document.getelementbyid（测试）；
警报（obj.clientleft + obj.clienttop + ）； / / 40,10
}；
2。offsetleft和offsettop
这组属性可以获得当前元素相对于父元素的位置。获取元素的位置目前与父元素相对，最好将其设置为绝对位置；否则，不同的浏览器将有不同的解释。
a，将位置设置为绝对值，所有浏览器返回相同的值：
复制代码代码如下所示：
测试的div元素
#测试{
背景颜色：绿色；
宽度：200px；
身高：200px；
位置：绝对；
左：30px；
上图：20px；
}
在window.onload =函数（）{
var obj = document.getelementbyid（测试）；
警报（obj.offsetleft + obj.offsettop + ）； / / 30, 20
}；
B，加上边框和填充物不会影响它的位置，但是加号根据累加。
3、box.offsetparent获取父元素
在offsetparent，如果父元素，非即回体对象，和IE（IE6）返回HTML对象。如果两个元素是嵌套的，如果上offsetparent父元素不使用位置回归身体的物体或HTML对象：absolute.so，当你offsetleft和offsettop，CSS的位置是非常重要的。
如果在多个层次上，外层已经定位，我们如何获得内层元素与主体或HTML元素之间的距离即从页面获取任何元素距离的位置。然后我们可以写一个函数，累的直飞Calais的背。
复制代码代码如下所示：
box.offsettop + box.offsetparent.offsettop； / /只有两层。
功能offsetleft（元）{
VaR左= element.offsetleft； / /得到第一层的距离
VaR母= element.offsetparent； / /先母元
而（父母）！=如果有一个父元素的层
左= parent.offsetleft； / /层积累的距离
母= parent.offsetparent； / /得到父元素层
然后继续循环。
返回左；
}
4.scrollTop and scrollLeft
这组属性可以得到隐藏的滚动条的面积大小（滚动条上方的区域），也可以设置到该区域。如果你想滚动滚动条到初始位置，你可以写一个函数：
复制代码代码如下所示：
功能scrollstart（元）{
如果（element.scrolltop！= 0）{
element.scrolltop = 0；
}
}
5、getboundingclientrect（）
此方法返回一个矩形对象，该对象包含四个属性：左、顶、右和底。
复制代码代码如下所示：
VaR箱= document.getelementbyid（'box '）； / /获取元素
警报（盒。getboundingclientrect）（前）； / /距离以上的网页元素以上的距离
警报（盒。getboundingclientrect）（右）； / /正确的距离对页面元素的左侧
警报（盒。getboundingclientrect）（。底部）； / /距距离下面的页面元素
警报（盒。getboundingclientrect）（左）； / /左距离对页面元素的左侧
注：即Firefox3 +，opera9.5，Chrome和Safari的支持。在伊江，默认的坐标从（2,2），从而在最后两像素距离超过其他浏览器。我们需要兼容。
复制代码代码如下所示：
document.documentelement.clienttop；IE 0、IE 2
document.documentelement.clientleft；IE 0、IE 2
functionggetrect（元）{
VaR矩形= element.getboundingclientrect（）；
var = document.documentelement.clienttop；
左= document.documentelement.clientleft VaR；
返回{
上图：rect.top顶，
rect.bottom顶底，
左：左rect.left，
右：rect.right左
}
}
另外，分别根据边缘的内侧边缘，测试所有的浏览器边框和滚动条都是一样的。
以上是本文所描述的全部内容，希望合作伙伴能喜欢。
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。