发布于 2017-03-25 22:47:12 | 152 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


下面小编就为大家带来一篇javascript获取网页各种高宽及位置的方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

screen对象

获取屏幕的高宽(分辨率)


screen.width     //屏幕的宽
screen.height    //屏幕的高
screen.availWidth  //屏幕可用宽度  屏幕的像素高度减去系统部件高度之后的值
screen.availHeight  //屏幕可用高度  屏幕的像素宽度减去系统部件宽度之后的值

window对象

获得窗口位置及大小


window.screenTop   //窗口顶部距屏幕顶部的距离
window.screenLeft  //窗口左侧距屏幕左侧的距离
window.innerWidth  //窗口中可视区域(viewpoint)的宽度
  alert(window.innerWidth); //chrome 1366 ff 1366 ie 1366
window.innerHeight  //窗口中可视区域(viewpoint)的高度 该值与浏览器是否显示菜单栏等因素有关
  alert(window.innerHeight); //chrome 643 ff 657 ie 673
window.outerWidth  //浏览器窗口本身的宽度(可视区域宽度+浏览器边框宽度)
  alert(window.outerWidth); //chrome 1366 ff 1382 ie 1382 
  //说明chrome在最大化时浏览器窗口没有边框宽度,非最大化时有8px边框
  //ff和ie上下左右有8px的边框宽度
window.outerHeight  //浏览器窗口本身的高度
  alert(window.outerHeight); //chrome 728 ff 744 ie 744

element对象

在介绍element对象各种高宽之前有必要解释一下盒模型

默认盒模型 box-sizing:content-box;


boxWidth = 2*margin + 2*border + 2*padding + width
boxHeight = 2*margin + 2*border + 2*padding + height

当不出现滚动条时


body{margin:0;}
#demo{
  width:100px;
  height:100px;
  padding:10px;
  border:20px;
  margin:30px;
  background-color:red;
}
<div id="demo">123456789 123456789</div>

clientWidth:在页面上返回内容的可视宽度(不包括边框,边距或滚动条)
clientHeight:在页面上返回内容的可视高度(不包括边框,边距或滚动条)


clientWidth = 2*padding + width - scrollbarWidth   
console.log(document.getElementById('demo').clientWidth); //120 此时scrollbarWidth=0
clientHeight = 2*padding + height - scrollbarHeight 
console.log(document.getElementById('demo').clientHeight); //120 此时scrollbarWidth=0

offsetWidth:返回元素的宽度包括边框和填充,但不包括边距
offsetHeight:返回元素的高度包括边框和填充,但不包括边距


offsetWidth = 2*border + 2*padding + width 
console.log(document.getElementById('demo').offsetWidth)  //160
offsetHeight = 2*border + 2*padding + height 
console.log(document.getElementById('demo').offsetHeight)  //160

offsetLeft: 获取对象相对于版面或由 offsetLeft属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由 offsetTop属性指定的父坐标的计算顶端位置


console.log(document.getElementById('demo').offsetLeft)  //30
console.log(document.getElementById('demo').offsetTop)  //30

当出现滚动条时


body{
  margin:0;
  padding:20px;
  width:1000px;
  height:500px;
}
<div id="demo">123456789123456789</div>

scrollWidth: 返回元素的整个宽度(包括带滚动条的隐蔽的地方)
scrollHeight: 返回整个元素的高度(包括带滚动条的隐蔽的地方)


scrollWidth = 2*padding + width  
console.log(document.body.scrollWidth)  //1040
scrollHeight = 2*padding + width  
console.log(document.body.scrollHeight)  //540

scrollTop: 向下滑动滚动块时元素隐藏内容的高度。不设置时默认为0,其值随着滚动块滚动而变化
scrollLeft: 向右滑动滚动块时元素隐藏内容的宽度。不设置时默认为0,其值随着滚动块滚动而变化

event对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
event.pageX:相对整个页面的坐标,以页面的左上角为坐标原点到鼠标所在点的水平距离(IE8不支持)
event.pageY:相对整个页面的坐标,以页面的左上角为坐标原点到鼠标所在点的垂直距离(IE8不支持)
event.clientX:相对可视区域的坐标,以浏览器可视区域左上角为坐标原点到鼠标所在点的水平距离
event.clientY:相对可视区域的坐标,以浏览器可视区域左上角为坐标原点到鼠标所在点的垂直距离
event.screenX:相对电脑屏幕的坐标,以屏幕左上角为坐标原点到鼠标所在点的水平距离
event.screenY:相对电脑屏幕的坐标,以屏幕左上角为坐标原点到鼠标所在点的垂直距离
event.offsetX:相对于自身的坐标,以自身的padding左上角为坐标原点到鼠标所在点的水平距离
event.offsetY:相对于自身的坐标,以自身的padding左上角为坐标原点到鼠标所在点的水平距离

以上这篇javascript获取网页各种高宽及位置的方法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持phperz。



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务