javaScript 元素的位置，尺寸，宽度总结上
程序员文章站
2022-05-27 08:37:20
...
<style>
body{
margin:0px;
padding:0px;
}
#div1{
width:300px;
height:200px;
background:#CC3;
margin:30px auto 0px 10px;
position:relative;
}
#div2{
width:300px;
height:200px;
background:#096;
position:absolute;
left:310px;
}
#div11{
margin-left:10px;
}
</style>
</head>
<body>
<div id='div1'>
xxxxxx
<div id='div11'>fasdfa</div>
</div>
<div id='div2'>
</div>
<div id='div3' style="width:200px">
<div id='div31'></div>
</div>
</body>
//可视区及屏幕坐标
//clientX 可视区x坐标，距离左边框的位置,clientY,
//鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.
//pageX,pageY 鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
//screenX 屏幕区x坐标，距离左屏幕的位置,creenY
////在IE中，event对象是全局的，它被存储在window.event中
//在chrome 版本 40.0.2214.115 m中 evt与window.event都支持,改变其顺序不影响其结果,都是clienX当出现滚动，他显示的值是会变化的,而pageX不会
window.onload=function(){
document.onclick=function(evt){
var e=window.event||evt;
//alert(e.clientX+' '+e.clientY);
document.getElementById('div2').innerHTML='evt: '+evt+' '+ 'window.event: '+window.event+' '+'clientX: '+e.clientX+' '+'clientY: '+e.clientY+' '+'pageX: '+e.pageX+' '+'pageY: '+e.pageY;
setTimeout(function(){
document.write('document.body.clientLeft: '+document.body.clientLeft);
document.write('document.body.scrollLeft: '+document.body.scrollLeft);
},4000);
};
//获取尺寸
//来看下offsetParent这个属性
//看下实例的效果，意思就差不多明白了
//找寻有定位设置的父节点,没有就是body了,听说有一些是html，到是没有验证
console.info(document.getElementById('div11').offsetParent);//div1
console.info(document.getElementById('div31').offsetParent);//body
//对比下我写的css格式是不是有点眼熟
console.info(document.getElementById('div1').offsetHeight);//200
console.info(document.getElementById('div1').offsetLeft);//10
console.info(document.getElementById('div1').clientLeft);//0
console.info(document.getElementById('div1').offsetTop);//30
console.info(document.getElementById('div1').offsetWidth);//300
//下面这两种写法第一个是获取不到，第二个获取到了
//总结：这种方式只有行内才能获得
//再注意获得的值，一个带px，一个不带
console.info(document.getElementById('div1').style.width);//这个为空
console.info(document.getElementById('div3').style.width);//200px
//再验证一个
console.info(document.getElementById('div3').offsetWidth);//200
//还有一些body,screen等等
//一些总结
console.info('网页可见区域宽: '+document.body.clientWidth);
console.info('网页可见区域高: '+document.body.clientHeight);
console.info('网页正文全文宽: '+document.body.scrollWidth);
console.info('网页正文全高: '+document.body.scrollHeight);
console.info('网页正文部上: '+window.screenTop);
console.info('网页正文部左: '+window.screenLeft);
console.info('屏幕分辨率的高: '+window.screen.height);
console.info('屏幕分辨率的宽: '+window.screen.width);
console.info('屏幕可用工作区的高: '+window.screen.availHeight);
console.info('屏幕可用工作区的宽: '+window.screen.availWidth);
//获取绝对位置
//第一种方法
//第二种方法
};
//至此结束
上一篇： vue-pdf的3.3.1版本build后多生成168个js文件
下一篇： c语言：循环的应用