<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);
//获取绝对位置
//第一种方法
//第二种方法
};
//至此结束
相关推荐
总结，JavaScript获取网页高度和宽度的方法多种多样，可以根据具体需求选择合适的方式。了解这些知识对于提升网页交互体验和实现动态布局至关重要。在教育领域，理解并熟练掌握这些技术可以帮助学生更好地构建动态、...
在前端开发中，DOM元素尺寸的获取和...在实际项目中，这些知识的应用广泛且至关重要，无论是简单的页面布局还是复杂的交互设计，都离不开对元素尺寸和位置的精确掌控。持续学习和实践，将是成为优秀前端开发者的关键。
本文将深入探讨JavaScript中与元素尺寸和位置相关的DOM属性，并指导如何在实际开发中正确理解和运用这些属性。 首先，需要明确几个关键的DOM属性，它们分别是offsetWidth、clientWidth、scrollWidth以及相对应的...
### JavaScript 获取网页各种高宽及位置的方法总结 #### 屏幕尺寸相关属性 - **`screen.width`**：表示屏幕的宽度（以像素为单位）。 - **`screen.height`**：表示屏幕的高度（以像素为单位）。 - **`screen....
总结来说，通过本文的介绍，我们可以了解到利用jQuery来动态改变页面元素尺寸的便捷性，以及如何通过编写简单的事件处理函数来响应用户的操作。这种技术在开发响应式网站时尤为有用，它使得开发者能够创建出更加灵活...
### JavaScript弹出窗口知识点总结 #### 一、概述 JavaScript是一种广泛使用的脚本语言，它在前端开发中占据着极其重要的地位。通过JavaScript，开发者可以实现网页与用户的交互功能，其中弹出窗口就是一种常见的...
本文中提到的一种方法是通过在目标元素内动态创建一个iframe元素，使得iframe的尺寸继承自父元素，并通过监听iframe的resize事件来间接监听到父元素尺寸的变化。当父元素尺寸变化时，其内部的iframe的尺寸也会随之...
在处理动态布局时，可能需要监听元素尺寸的变化，这时可以使用`resize`事件。但需要注意的是，不是所有元素都支持`resize`事件，它主要适用于`window`对象。若需监听其他元素的尺寸变化，可以使用MutationObserver...
设置div的宽度可以帮助我们精确地调整元素在页面上的展示大小，从而实现更加灵活的布局。 1. 直接设置宽度： 你可以直接通过width属性为div设置一个固定值，例如： ```css div { width: 200px; } ``` 这将使...
除了上述基本的获取，jQuery还提供了获取和设置元素尺寸的方法： - **获取或设置元素宽度**：`$(obj).width()` 可以用来获取元素的宽度，加上参数则可以设置元素的宽度。 - **获取或设置元素高度**：`$(obj).height...
对于获取和设置`div`元素的高度和宽度，JavaScript提供了多种方法来确保跨浏览器的一致性和兼容性。本文将详细介绍如何使用JavaScript来获取和设置`div`的高度和宽度，并确保这些操作能够在不同的浏览器中正常工作。...
总结一下，这篇文章简要介绍了如何利用JavaScript的`offset`属性获取元素的位置，并监听用户的点击事件来获取鼠标坐标。虽然案例没有完整展示元素的动态移动，但已经揭示了实现这一功能的基本思路。掌握这些基础知识...
总结来说，通过使用JavaScript提供的各种属性和方法，开发者能够获得页面元素的尺寸信息，包括屏幕尺寸、滚动区域尺寸、内容区域尺寸等。在获取尺寸的过程中，除了需要了解不同属性和方法的应用场景，还需要注意...
总结来说，通过JavaScript结合适当的CSS，我们可以确保不同尺寸的图片在统一尺寸的容器中展示时保持比例，适应各种主流浏览器。这个过程涉及到DOM操作、事件监听以及尺寸计算，是前端开发中常见且实用的技术点。
### 元素尺寸和位置 在获取元素的尺寸和位置时，需要了解CSS的盒模型（Box Model）。默认的盒模型是`content-box`，其中元素的宽度和高度计算如下： - `boxWidth = width + 2*(margin + border + padding)` - `box...
总结来说，理解并灵活运用这些JavaScript属性可以帮助开发者精确控制网页元素的布局和滚动行为，从而创造出更丰富、更具有交互性的用户体验。在实际开发中，务必考虑到浏览器之间的差异，并进行适当的兼容性处理。
总结一下，JavaScript中获取鼠标指针位置的关键在于正确使用`event`对象的属性，并处理浏览器之间的差异。通过结合`pageX/pageY`、`clientX/clientY`、`scrollLeft/scrollTop`以及`offsetX/offsetY`或`layerX/layerY...
本文将详细介绍如何使用JavaScript来获取浏览器显示区域的相关尺寸信息。 #### 一、关键概念解析 在开始之前，我们先来了解几个关键的概念： - **Client Size**：表示可视区域的宽度和高度。 - **Offset Size**：...