原生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未设定宽高的情况下,不会出现滚动条。
转载于:https://www.cnblogs.com/ranzige/p/3554252.html
原生js获取宽高与jquery获取宽高的方法的关系相关推荐
- js原生后代选择器_JavaScript DOM查询,原生js实现元素子节点的获取
每个网页都是一个dom树,网页中所有的内容都是这个树上的一个节点.JavaScript的工作就是操作这些节点,对节点进行查增删改操作,或是给节点绑定事件. 网页 dom树 要操作dom节点,首先要获取 ...
- jq获取 html元素节点,jQuery 获取当前节点的html
原标题:jQuery 获取当前节点的html 在开发过程中,jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然后我们有时候确需要,找遍jQuery api文档也 ...
- java 获取td_[Java教程]jQuery获取table表中的td标签
[Java教程]jQuery获取table表中的td标签 0 2017-07-28 00:00:08 首先我来介绍一下我遇到的问题 1.当有一个table表包含了 标签,标签,大致可以认为是这样的: ...
- html获取访客ip,jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
本文实例讲述了jQuery获取访问者IP地址的方法.分享给大家供大家参考,具体如下: $(document).ready(function(){ //通过调用新浪IP地址库接口查询用户当前所在国家.省 ...
- 获取 html class属性,jquery获取class属性的值
jquery获取class属性的值的方法:首先创建一个前端示例文件:然后通过"$('#demo').attr('class');"或者"$('#demo')[0].cla ...
- js获取页面高度以及jquery获取页面滚动距离scrollTop方法
$(window).height(); //获取浏览器自身高度 也就是你浏览器所能看到的页面的那部分的高度 这个大小在你缩放浏览器窗口大小时 会改变 $(document).height(); //获 ...
- 原生js封装table表格操作,获取任意行列td,任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
- jquery 获取父节点 html,jquery 获取父节点
在使用jquery时,很多时候都需要获取当前节点的父节点,包括直接父节点和祖先父节点.用的最多的方法是parent([expr])和parents([expr]).从方法的名字上就可以判断前一个方法是 ...
- [开发笔记]-使用jquery获取url及url参数的方法
转载自:作者:酷小孩 出处:http://www.cnblogs.com/babycool/ 使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jque ...
最新文章
- 51Nod:1085 背包问题
- JS中的call、apply、bind方法详解
- 防灾科技学院期末软件测试,防灾科技学院2014 软件测试客观题
- python 画图设置横纵坐标_Python输出高质量论文图片
- iOS系统库头文件中NS_AVAILABLE相关
- 单链表删除、修改和查找
- Windows如何安装MSMQ消息队列
- lightning接口_Lightning太赚钱?iPhone永远不会用Type-C
- ASP.NET MVC实践系列1-UrlRouting
- 【算法】排序_基数排序
- sqlmap详细使用教程
- 国家开放大学-农村社会学-形考作业4
- 计算机毕业论文数据挖掘,数据挖掘论文范文
- 身份认证 对称密钥的认证协议 公开密钥的认证协议 公钥基础设施PKI
- Laplacian算子-Log算子-Dog算子边缘检测原理合集及实现
- cf的服务器型号,常用CF法兰的型号和尺寸表
- web前端在线预览,编辑word文件的方法汇总(2021-7-14更新)
- 基于C# winform实现随机点名小工具(支持csv导入)
- mybatis中的when,then,end的用法
- WES2009创建开发