js中屏幕尺寸计算的几个属性学习笔记

基本概念

document.body.clientWidth :指的是BODY对象宽度
document.body.clientHeight :指的是BODY对象高度
document.documentElement.clientWidth: 指的是可见区域宽度
document.documentElement.clientHeight :指的是可见区域高度

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

clientX/clientY ：事件属性返回当事件被触发时鼠标指针向对于浏览器页面（当前窗口）的水平坐标/垂直坐标（不包含滚动条）。

pageX/pageY:指鼠标在页面上的位置，以页面左侧为参考点，鼠标相对于整个页面（网页的全部）的X/Y坐标。

offsetX/offsetY:鼠标相对于“触发事件的元素”的位置，事件和目标节点的填充边缘之间的鼠标指针的在X偏移坐标：特别说明：只有IE支持！

screenX/screenY：鼠标在屏幕中的位置，指的是鼠标到电脑屏幕左侧的距离

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

借用一张图说明：

clientWidth/clientHeight:不包含元素的边框

offetWidth/offsetHeight：包含元素的边框

offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table 元素对象或根元素（标准模式下为 html；quirks 模式下为 body）。

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

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

时间： 2024-10-24 18:52:26

js中屏幕尺寸计算的几个属性学习笔记的相关文章

JS中：json对象数组按对象属性排序

var array = [ {name: 'a', phone: 1}, {name: 'b', phone: 5}, {name: 'd', phone: 3}, {name: 'c', phone: 4} ] array.sort(getSortFun('desc', 'phone')); function getSortFun(order, sortBy) { var ordAlpah = (order == 'asc') ? '>' : '<'; var sortFun = new F

js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别

js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox等. 一.测试1:无滚动条时,dom对象的offsetWidth.clientWidth和scrollWidth (1)测试代码 <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset=&q

js中进行金额计算parseFloat

在js中进行以元为单位进行金额计算时 使用parseFloat会产生精度问题var price = 10.99;var quantity = 7;var needPay = parseFloat(price * quantity); needPay的正确结果应该是76.93元  但是运行后发现needPay为76.93000000000001 此情况可通过 toFixed(n)  方法修正 但是这个方法对 js版本要求较高 不能兼容ie5 另一个解决方案是: 将元为单位的金额乘以100换算为分进

JS中设置按钮不可用的disabled属性

JS中可以通过document.getElementById("btn").disabled = true;来设置按钮不可用 也可以设置form表单中的textarea的disabled属性,可以让用户无法向textarea备注框内输入字符 document.getElementById("textarea").disabled = true; 带有一个禁用输入字段的 HTML 表单: <form action="form_action.asp&qu

JS中的实例方法、静态方法、实例属性、静态属性

一.静态方法与实例方法的例子: 我们先来看一个例子来看一下JS中的静态方法和实例方法到底是什么? 静态方法: function A(){} A.col='red'  //静态属性 A.sayMeS=function(){ console.log("Hello World S!"); } A.sayMeS();//输出Hello World S! 实例方法: function A(){ this.Color="yellow"  //实例属性 } A.prototype

&lt;JS中的数学计算&gt;之简单实例讲解

1.取余数   % var a=10%3; //a=1 2.取绝对值  Math.abs() var a=Math.abs(-102.1); var b=Math.abs(102.1); //a=102.1;b=102.1 3.截取小数点后长度并进行四舍五入 toFixed() var num_1 = new Number(13.53); alert(num_1.toFixed(1)); alert(num_1.toFixed(0)); //13.5 //14 var num_2 = new N

js获取屏幕尺寸 根据尺寸跳转不同网站

<script type="text/javascript"> function browserRedirect() { var sUserAgent= navigator.userAgent.toLowerCase(); var bIsIpad= sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os&

根据屏幕尺寸计算rem

!(function (doc, win) { var docEle = doc.documentElement, evt = "onorientationchange" in window ? "orientationchange" : "resize", fn = function () { var width = docEle.clientWidth; // width && (docEle.style.fontSize =

JS中常用的几种时间格式处理-【笔记整理】

//此处整理点平时常用到的时间格式处理方法 ------------------------------------------- 1 //时间格式化函数 2 Date.prototype.format = function (format) { 3 var o = { 4 "M+": this.getMonth() + 1, //month 5 "d+": this.getDate(), //day 6 "h+": this.getHours(