JavaScript中各种宽高的理解和应用

下面来抛砖引玉，简单的把“js/jquery各种宽高的理解和应用”再来说一下！

window相关的宽高

window是可以省略的，直接与window挂钩的宽高有如下几个！

window.innerWidth
window.innerHeight
window.outerWidth
window.outerHeight
展示如下：

innerHeight又叫可视区域。支持IE9及以上浏览器。

window.screen.height
window.screen.width
window.screen.availHeight
window.screen.availWidth
window.screenTop
window.screenLeft
enter link description here

与document相关的宽高

包括与client相关的、与offset相关的、与scroll相关的。

并讲到了documentElement和body的区别。

Event对象的五种坐标

具体我就不多写了，等上线之后大家看视频教程吧！

时间： 2024-07-30 14:38:20

JavaScript中各种宽高的理解和应用的相关文章

javascript获取网页宽高方法汇总_javascript技巧

document.body.clientWidth - 网页可见区域宽 document.body.clientHeight - 网页可见区域高 document.body.offsetWidth - 网页可见区域宽,包括边线和滚动条的宽 document.body.offsetHeight - 网页可见区域高,包括边线和滚动条的高[FF,chrom下是整个页面高,IE opera 下正常] document.body.scrollWidth - 网页总宽 document.body.scrol

networkimageview-NetworkImageView 在xml中设置宽高真的能自动压缩网络原图吗?

问题描述 NetworkImageView 在xml中设置宽高真的能自动压缩网络原图吗? android:id="@+id/iv" android:layout_width="100dp" android:layout_height="100dp" /> 当我加载的网络图片尺寸是2000*3000的时候这很明显没压缩! 改成这样后 android:id="@+id/iv" android:layout_width=&

对JavaScript中this指针的新理解分享_javascript技巧

一直以来对this的理解只在可以用,会用,却没有去深究其本质.这次,借着<JavaScript The Good Parts>,作了一次深刻的理解.(所有调试都可以在控制台中看到,浏览器F12键) 下面我们一起来看看这个this吧. 在我们声明一个函数时,每个函数除了有定义时的parameters(形参),自身还会有额外的两个参数,一个是this,一个是arguments(实参).arguments就是函数实际接受到的参数,是一个类数组.arguments我只做个简略的介绍,重点我们放在thi

javascript中try...catch...finally的理解及使用教程

try...catch...finally的理解以前,我一直喜欢用console.log(do some thing)去执行输出的类型和值,想马上看到弹出的信息,就会直接在浏览器alert()一下,这些是基础知识. 稍微复杂一点点,就要用到判断语句,if else进行条件判断,话说if条件else否则,这样的判断对于写程序代码的码侬已经是非常熟悉不过了. 如果你觉得这个也很简单,可能会用到混合if else条件判断语句加上try catch 来处理语句,虽然用try catch能处理任何的对象

javascript中关于new关键词的理解

Javascript中,实例化一个对象,会用到new关键字. 经常有人会问我,对于一个函数,什么时候该使用new关键字. 在回答这个问题之前,需要先了解清楚new的本质,在调用new Function的时候,new做了什么操作. 先看如下代码: // 定义类类名字是 classA function classA(){ this.name=1; } classA.prototype.show = function(){ alert(this.name); }; // 用new实例

javascript中的原型链深入理解

要弄清楚原型链就要先弄清楚 function 类型,在javascript中没有类的概念,都是函数,所以它是一门函数式的编程语言要弄清楚原型链就要先弄清楚 function 类型,在javascript中没有类的概念,都是函数,所以它是一门函数式的编程语言.类有一个很重要的特性,就是它可以根据它的构造函数来创建以它为模板的对象.在javascript中,函数就有2个功能第一. 作为一般函数调用第二. 作为它原型对象的构造函数也就new() 我们来看一个例子代码如下:

javascript获取图片宽高的例子总结

一.简陋的获取图片方式代码如下 // 图片地址后面加时间戳是为了避免缓存 var img_url = '/static/upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 打印 alert('width:'+img.width+',heig

javascript中的原型链深入理解_基础知识

要弄清楚原型链就要先弄清楚 function 类型,在javascript中没有类的概念,都是函数,所以它是一门函数式的编程语言.类有一个很重要的特性,就是它可以根据它的构造函数来创建以它为模板的对象.在javascript中,函数就有2个功能第一. 作为一般函数调用第二. 作为它原型对象的构造函数也就new() 我们来看一个例子复制代码代码如下: function a(){ this.name = 'a'; } 当创建一个函数,它会发生什么呢? 第一.它会创建1个函数对象也就是a

针对JavaScript中this指向的简单理解_javascript技巧

首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题. 为什么要学习this?如果你学过函数式编程,面向对象编程,那你肯定知道干什么用的,如果你没有学过,那么暂时可以