<script>
windowonload = function(){
//把屏幕宽度赋值给该元素
documentgetElementById("float_banner")stylewidth = windowscreenwidth + 'px';
}
</script>
的却，在css代码页可以执行js代码，但是，不建议这样做
// 通过id获取控件，offsetWidth为控件实际展现宽度。
<div id="divId" style="float: left">1111111111111</div>
var width = documentgetElementById("divId")offsetWidth;
alert(width);
右侧的“查询”请设置style="float:right"
让”查询“靠右显示，就ok了。
IE中：
documentbodyclientWidth ==> BODY对象宽度
documentbodyclientHeight ==> BODY对象高度
documentdocumentElementclientWidth ==> 可见区域宽度
documentdocumentElementclientHeight ==> 可见区域高度
FireFox中：
documentbodyclientWidth ==> BODY对象宽度
documentbodyclientHeight ==> BODY对象高度
documentdocumentElementclientWidth ==> 可见区域宽度
documentdocumentElementclientHeight ==> 可见区域高度
Opera中：
documentbodyclientWidth ==> 可见区域宽度
documentbodyclientHeight ==> 可见区域高度
documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
没有定义W3C的标准，则
IE为：
documentdocumentElementclientWidth ==> 0
documentdocumentElementclientHeight ==> 0
FireFox为：
documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽)
documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
documentdocumentElementclientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
documentdocumentElementclientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
网页可见区域宽： documentbodyclientWidth
网页可见区域高： documentbodyclientHeight
网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)
网页可见区域高： documentbodyoffsetHeight (包括边线的高)
网页正文全文宽： documentbodyscrollWidth
网页正文全文高： documentbodyscrollHeight
网页被卷去的高： documentbodyscrollTop
网页被卷去的左： documentbodyscrollLeft
网页正文部分上： windowscreenTop
网页正文部分左： windowscreenLeft
屏幕分辨率的高： windowscreenheight
屏幕分辨率的宽： windowscreenwidth
屏幕可用工作区高度： windowscreenavailHeight
屏幕可用工作区宽度： windowscreenavailWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
eventclientX 相对文档的水平座标
eventclientY 相对文档的垂直座标
eventoffsetX 相对容器的水平坐标
eventoffsetY 相对容器的垂直坐标
documentdocumentElementscrollTop 垂直方向滚动的值
eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量
示例：
var winWidth = 0;var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (windowinnerWidth)
winWidth = windowinnerWidth;
else if ((documentbody) && (documentbodyclientWidth))
winWidth = documentbodyclientWidth;
//获取窗口高度
if (windowinnerHeight)
winHeight = windowinnerHeight;
else if ((documentbody) && (documentbodyclientHeight))
winHeight = documentbodyclientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (documentdocumentElement && documentdocumentElementclientHeight && documentdocumentElementclientWidth)
{
winHeight = documentdocumentElementclientHeight;
winWidth = documentdocumentElementclientWidth;
}
//结果输出至两个文本框
documentform1availHeightvalue= winHeight;
documentform1availWidthvalue= winWidth;
}
findDimensions();
//调用函数，获取数值
windowonresize=findDimensions;
1、clientWidth / clintHeight
clientWidth = 元素的宽度 + 元素的paddingLeft + 元素的paddingRight
clientHeight = 元素的高度 + 元素的paddingTop + 元素的paddingBottom
注意：如果该元素上存在上下滑动滚动条，则clientWidth的值不包括滚动条所占的宽度（即获得的clientWidth已经减去了滚动条的宽度）
注意：如果该元素上存在左右滑动滚动条，则clientHeight的值不包括滚动条所占的宽度（即获得的clientHeight已经减去了滚动条的高度）
2、clientTop / clientLeft
clientTop - 可视区域的上边距距离自身上边框的外边框的距离（即为上边框的宽度）
clientLeft - 可视区域的左边距距离自身左边框的外边框的距离（即为左边框的宽度）
没有滑动条的效果代码如下：
[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素的高度和宽度</title>
<style type="text/css">
#wrap{
height: 500px;
width: 500px;
background-color: skyblue;
margin: 0 auto;
border: 3px solid red;
overflow: scroll;
}
#content{
height: 200px;
width: 200px;
background-color: greenyellow;
margin: 0 auto;
border: 0px solid yellow;
border-width: 5px 6px 8px 12px;
padding: 5px 4px 6px 12px;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content"></div>
</div>
</body>
<script type="text/javascript">
//获取content对象
var contentObj = documentgetElementById("content");
consolelog(contentObjclientHeight);
consolelog(contentObjclientWidth);
</script>
</html>
以上结果输出的即为id为content的div的clientHeight 和 clientWidth 分别为 211 = height(200) + paddingTop(5) + paddingBottom(6)
有滚动条的代码如下,
在content div的里面添加一个id为one的div让新添加的div超出隐藏即可出现滚动条
[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素的高度和宽度</title>
<style type="text/css">
#wrap{
height: 500px;
width: 500px;
background-color: skyblue;
margin: 0 auto;
border: 3px solid red;
overflow: scroll;
padding: 5px;
}
#content{
height: 200px;
width: 200px;
background-color: greenyellow;
margin: 0 auto;
border: 0px solid yellow;
border-width: 5px 6px 8px 12px;
padding: 5px 4px 6px 12px;
margin-top: 50px;
overflow: scroll;
}
#one{
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
<div id="one"></div>
</div>
</div>
</body>
<script type="text/javascript">
//获取content对象
var contentObj = documentgetElementById("content");
consolelog(contentObjclientHeight);
consolelog(contentObjclientWidth);
consolelog(contentObjclientTop);
consolelog(contentObjclientLeft);
</script>
</html>
最后输出的结果为clientHeight 和 clientWidth分别为 196 = height(200) + paddingTop(5) + paddingBottom(6) - 滚动条的宽度(15)
201 = width(200) + paddingLeft(12) + paddingRight(4) - 滚动条的宽度(15)
3、offsetHeight / offsetWidth
offsetHeight / offsetWidth实际上获取的内容和clientHeight / clientWidth的差别在于，offsetHeight和offsetWidth 不仅包括元素的高度和宽度和padding的值，而且包括border的宽度
注意：offsetHeight / offsetWidth包括滚动条的宽度（这一点与clientHeight / clientWidth）不同
[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素的高度和宽度</title>
<style type="text/css">
#wrap{
height: 500px;
width: 500px;
background-color: skyblue;
margin: 0 auto;
border: 3px solid red;
overflow: scroll;
padding: 5px;
}
#content{
height: 200px;
width: 200px;
background-color: greenyellow;
margin: 0 auto;
border: 0px solid yellow;
border-width: 5px 6px 8px 12px;
padding: 5px 4px 6px 12px;
margin-top: 50px;
overflow: scroll;
}
#one{
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
<div id="one"></div>
</div>
</div>
</body>
<script type="text/javascript">
//获取content对象
var contentObj = documentgetElementById("content");
consolelog(contentObjoffsetHeight);
consolelog(contentObjoffsetWidth);
consolelog(contentObjoffsetLeft);
consolelog(contentObjoffsetTop);
</script>
</html>
输出的结果：offsetHeight = height(200) + paddingTop(5) + paddingBottom(6) + borderTop(5) + borderBottom(8)
offsetWidth = width(200) + paddingLeft(12) + paddingRight(4) + borderLeft(12) + borderRight(6)
4、offsetTop / offsetLeft
offsetTop - 该元素的上边框的外边缘距离父级元素上边框的内边缘的距离
offsetLeft - 该元素的左边框的外边缘距离父级元素左边框的内边缘的距离
5、scrollHeight / scrollWidth
scrollHeight = 子级超出父级的元素的高度 + 父级的上下padding值
scrollWidth = 子级超出父级的元素的宽度 + 父级的左padding
6、scrollTop
scrollTop 元素滚动的距离
以上就是关于javascript 获取宽度，然后再css中使用的问题全部的内容，包括:javascript 获取宽度，然后再css中使用的问题、js获取控件宽度、如何用JS动态获取浏览器的宽高等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）