原生js获取宽高与jquery获取宽高的方法关系对比
2023-06-13 09:15:24 时间
说明: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未设定宽高的情况下,不会出现滚动条。
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未设定宽高的情况下,不会出现滚动条。
相关文章
- js书写原生ajax,JS 原生ajax写法
- js与jQuery的区别以及jQuery选择器和方法的使用
- js中moment方法_jquery 虚拟dom
- Js生成二维码_js在线生成二维码
- js中四舍五入的方法_JS取整
- Js/JQuery根据时区获取当前时间
- 【JS 逆向百例】猿人学系列 web 比赛第二题:js 混淆 - 动态 cookie,详细剖析
- 生成二维码的 jQuery 插件:jquery.qrcode.js
- Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法详解数据库
- jquery.jCal.js显示日历插件详解编程语言
- 基于jquery的图片懒加载js
- 修改jquery.lazyload.js实现页面延迟载入
- jQuery在vs2008及js文件中的无智能提示的解决方法
- js或者jquery判断图片是否加载完成实现代码
- jquery全选/全不选/反选另一种实现方法(配合原生js)
- Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
- jquery动态加载js三种方法实例
- jquery与js函数冲突的两种解决方法
- js阻止冒泡及jquery阻止事件冒泡示例介绍
- jquery插件lazyload.js延迟加载图片的使用方法
- 三种动态加载js的jquery实例代码另附去除js方法
- Jquery修改页面标题title其它JS失效的解决方法
- jquery库文件略庞大用纯js替换jquery的方法
- js/jquery判断浏览器的方法小结