获得网页值以及设置div效果
2010-03-24 13:04
239 查看
先看基础
window.screen.width是获取整个屏幕的高度信息,浏览器最大化的情况下是”1024”
window.screen.width是获取整个屏幕去除任务栏后的高度信息,浏览器最大化的情况下是”1004”
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
下面看设置div
废话少说,先建立一个htm页面
<input type="text">
<div id="divShow" style="display:none;position:absolute;">显示的内容</div>
display:none,表示此层隐藏
position:absolute,表示此层的为绝对位置,方便后期进行绝对定位
添加事件,完成效果
<script type="text/javascript">
function showDiv(obj) {
// 保存元素
var el = obj;
// 获得元素的左偏移量
var left = obj.offsetLeft;
// 获得元素的顶端偏移量
var top = obj.offsetTop;
// 循环获得元素的父级控件,累加左和顶端偏移量
while (obj = obj.offsetParent) {
left += obj.offsetLeft;
top += obj.offsetTop;
}
// 设置层的坐标并显示
document.all.divShow.style.pixelLeft = left;
// 层的顶端距离为元素的顶端距离加上元素的高
document.all.divShow.style.pixelTop = top + el.offsetHeight;
document.all.divShow.style.display = "block";
}
</script>
<style>
#divShow
{
width:150px;
height:180px;
border-width:thin;
background:yellow;
}
</style>
<input type="text" onfocus="showDiv(this);">
<div id="divShow" style="display:none;position:absolute;">显示的内容</div>
注:offsetLeft和OffsetTop不是获得元素和页面的距离,只是获得元素和父元素的的距离
所以要进行while循环一层层累加距离,最后得到元素和页面之间的距离
层次关系:本元素->父元素->……>body->null,当为null时,退出while循环
点击后的最终效果:)
window.screen.width是获取整个屏幕的高度信息,浏览器最大化的情况下是”1024”
window.screen.width是获取整个屏幕去除任务栏后的高度信息,浏览器最大化的情况下是”1004”
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
下面看设置div
废话少说,先建立一个htm页面
<input type="text">
<div id="divShow" style="display:none;position:absolute;">显示的内容</div>
display:none,表示此层隐藏
position:absolute,表示此层的为绝对位置,方便后期进行绝对定位
添加事件,完成效果
<script type="text/javascript">
function showDiv(obj) {
// 保存元素
var el = obj;
// 获得元素的左偏移量
var left = obj.offsetLeft;
// 获得元素的顶端偏移量
var top = obj.offsetTop;
// 循环获得元素的父级控件,累加左和顶端偏移量
while (obj = obj.offsetParent) {
left += obj.offsetLeft;
top += obj.offsetTop;
}
// 设置层的坐标并显示
document.all.divShow.style.pixelLeft = left;
// 层的顶端距离为元素的顶端距离加上元素的高
document.all.divShow.style.pixelTop = top + el.offsetHeight;
document.all.divShow.style.display = "block";
}
</script>
<style>
#divShow
{
width:150px;
height:180px;
border-width:thin;
background:yellow;
}
</style>
<input type="text" onfocus="showDiv(this);">
<div id="divShow" style="display:none;position:absolute;">显示的内容</div>
注:offsetLeft和OffsetTop不是获得元素和页面的距离,只是获得元素和父元素的的距离
所以要进行while循环一层层累加距离,最后得到元素和页面之间的距离
层次关系:本元素->父元素->……>body->null,当为null时,退出while循环
点击后的最终效果:)
相关文章推荐
- android 设置textview边框以及点击效果
- android 里面对图片的不同压缩处理 以及简单拍照功能实现加设置闪光灯效果
- javascript获得和设置以及移除元素属性的三个方法
- CSS+DIV网页样式与布局——页面背景&图片效果
- 线程创建,属性设置与获得,等待线程结束,线程中fork,以及执行exec()
- javascript实现div浮动在网页最顶上并带关闭按钮效果实例
- DIV+CSS制作网页之如何设置z-index
- html使用display:inline-block实现标签右对齐,值左对齐效果。和设置div宽度,并居中显示。嵌套div的里层div文字居中显示
- javascript实现div浮动在网页最顶上并带关闭按钮效果实例
- 使用js创建div、添加子div并给div设置在css中定义的class选择属性以及设置style属性
- android中获得屏幕、视图、任务栏、状态栏的高宽以及屏幕的设置
- 顶部固定div可设置半透明效果
- swing中JPanel如何实现分组框的效果以及设置边框颜色
- Android Paint类介绍以及浮雕和阴影效果的设置
- android中获得屏幕、视图、任务栏、状态栏的高宽以及屏幕的设置
- android dialog 半透明效果,以及显示位置设置
- ubuntu 10.10安装 下载软件仓库信息失败以及 3D效果设置方法
- 【IOS学习笔记】为UICollectionView设置自适应屏幕宽度以及点击效果
- 去除ActionBar的阴影效果以及设置ActionBar的高度
- 用层实现长篇文章分页(用“scrollHeight”获得垂直滚动条的高度,用此值除以div层的高度,取整后就是总的页数。当用户查看某页时,便调用“showPage”方法,实现翻页效果。)