原生js获取宽高与jquery获取宽高的方法关系对比

说明：1、因为获取高度的情况跟获取宽度的情况一样，所以以下只说获取宽度的情况。
　　　2、以下所说的所有方法与属性所返回的值都是不带单位的。
　　　3、为了方便说明，以下情况采用缩写表示：

　　　　obj -> 在原生JS中表示DOM对象；在JQuery中表示JQuery对象
　　　　Width -> obj.style.width
　　　　OffsetWidth -> obj.offsetWidth
　　　　$width -> obj.width()
　　　　$innerWidth -> obj.innerWidth()
　　　　$outerWidth -> obj.outerWidth()
　　　　padding -> 表示对象的padding-left和padding-right之和
　　　　border -> 表示对象的border-left-width和border-right-width之和

原生JS获取宽度的相关属性有 width和offsetWidth。width的获取方法是obj.style.width，只有当对象是通过内嵌方式设定宽度时才能获得，否则返回的是一个空字符串。offsetWidth获得的值跟JQuery中获得对象的outerWidth一样，offsetWidth是非标准的但却得到很好支持的属性。

JQuery获得宽度的方法有width()、innerWidth()、outerWidth()这三种方法。具体使用方式是：obj.width()、obj.innerWidth()、obj.outerWidth()。width()获得的是对象的内容宽度，innerWidth()获得的是对象的内容宽度与填充宽度的和，outerWidth()获得的是包括边框、填充宽度与内容宽度在内的宽度。

这五种方法之间的关系如下：

width = $width;
offsetWidth = border + padding +width;
$innerWidth = padding + width;
$outerWidth = border + padding +width;

这五种方法对firefox、chrome、opera、safari、ie6、ie7、ie8、ie9都兼容，只是存在着两种问题：1、width在没有设定的情况下，chrome在第一次打开页面时，所获取到的宽度全部都是错误的。第二次打开时，结果就跟firefox一致。2、ie6未设定宽高的情况下，不会出现滚动条。

赞 (0)

相关推荐

  • Js获取图片原始宽高的实现代码

    如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(img) { var image = new Image(); image.src = img.src; return [image.width,image.height]; } //点击缩略图弹出层,显示原始图片. //获取class为tz_main_box下的所有p标签下的图片img $(".tz_

  • javascript获取网页宽高方法汇总

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

  • 纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示

    下文以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>我们</title> <s

  • javascript实现网页中涉及的简易运动（改变宽高、透明度、位置）

    平时工作中写网页涉及的运动往往都非常简单,比如改变宽高,透明度,位置,是最常用的几种形式,为了省事,整合了下,于是就有了下面这个东东: 兼容:IE系列.chrome.firefox.opera.Safari.360 /* javascript简易运动 Move.action(dom对象,json格式属性值对,缓动参考值,回调方法) 示例: var box = document.getElementById('Ele'); Move.action(box,{width:500,height:200

  • 动态改变textbox的宽高的js

    复制代码 代码如下: <INPUT type="button" value="↓" onclick="document.getElementById('temp10966').style.height=(parseInt (document.getElementById('temp10966').style.height)+150).toString()+'px'"> <INPUT type="button"

  • JS上传图片前的限制包括(jpg jpg gif及大小高宽)等

    功能: 1.限制扩展名:只能jpg || jpg和gif 2.限制图片大小:K为单位 3.限制图片宽高:px为单位(要么都有,要么都无) 4.限制已经损坏的图片(没有预览的图片) 5.限制更改过扩展名的图片(比如强制把一个动态的GIF扩展名改为JPG了) 使用限制: 要在InputFile里增加onchange事件,使其选择文件后能在一个img标签里加载出来,否则使用会出错 imglimit.js 复制代码 代码如下: function limitImg(){ var img=document.

  • js获取图片宽高的方法

    js获取图片宽高的方法

    本文分享多种js获取图片宽高的方法,并且通过实例进行分析,希望大家从中有所收获. 一.简陋的获取图片方式 // 图片地址 后面加时间戳是为了避免缓存 var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 打印 alert('width:'+img.width+',height:'

  • JS 获取浏览器和屏幕宽高等信息的实现思路及代码

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

  • js判断图片加载完成后获取图片实际宽高的方法

    本文实例讲述了js判断图片加载完成后获取图片实际宽高的方法.分享给大家供大家参考,具体如下: 通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高,这显然在有些时候不是我们想要的结果,那么有没有一种方法来获取这样的实际宽高呢?答案是有的.下面的代码就能解决这样的问题: <img src="01.jpg&q

  • JS 获取浏览器和屏幕宽高等信息代码

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

  • JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应 复制代码 代码如下: <img src="http://xxx.jpg" id="imgs" onload="adapt();"/> 复制代码 代码如下: function adapt(){ var tableWidth = $("#imgTable").width(); //表格宽度 var img = new Image(); img.src =$('#imgs

  • javascript获取隐藏dom的宽高 具体实现

    首先clone一个DOM,设置position:absolute,然后设置top为一个比较大的负值,然后使其显示出来,最后获取到了DOM的宽高后,将其remove.具体代码如下:Js代码 复制代码 代码如下: function getCss(elem, css){   if (window.getComputedStyle) {    return window.getComputedStyle(elem, null)[css];   }else if (elem.currentStyle) {

  • javascript窗口宽高,鼠标位置,滚动高度(详细解析)

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

  • JS获取IMG图片高宽的简单实例

    前段时间在LJW写的touchslider.js轮播代码里添加自适应屏幕大小的功能时,遇到一个问题.不管用什么样的方法都无法获取到IMG标签的高宽,最后只有给图片定一个高宽的比例值:趁今天有空我就写了几个demo测试了下,找了下原因:且听我细细说来,如有哪里说的不对的,欢迎拍砖--- 首先获取高宽的方法具我所知有: obj.style.width(height); obj.offsetWidth(offsetHeight); obj.clientWidth(clientHeight); getC

  • js 获取屏幕各种宽高的方法(浏览器兼容)

    屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网

随机推荐