Js与Jq 获取页面元素值的方法和差异对比


Posted in Javascript onApril 30, 2015

JS与Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍。

1.Js获取浏览器高度和宽度

document.documentElement.clientWidth ==> 浏览器可见区域宽度
document.documentElement.clientHeight ==> 浏览器可见区域高度
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度

Jq获取浏览器高度和宽度

$(window).width() ==> 浏览器可见区域宽度
$(window).height() ==> 浏览器可见区域高度
$(document).height() ==> 页面文档的高度
$(document.body).height() ==> BODY对象高度

2.Js获取对象的高度和宽度

obj.width = obj.style.width
obj.clientWidth = width + padding   ==> 获得包括内边界(padding)的元素宽度
obj.offsetHeight = height + padding + border ==> 获得包括内边界(padding)和边框(border)的元素高度

Jq获取对象的高度和宽度

obj.innerWidth() ==> 获得包括内边界(padding)的元素宽度,
obj.outerWidth() ==> 获得包括内边界(padding)和边框(border)的元素宽度
obj.outerWidth(true) ==> 获得包括外边界(margin)的元素宽度
w同一个元素应该是:width()<=innerWidth()<=outerWidth()<=outerWidth(true);

3.Js 获取对象的相对高度和宽度

obj.offsetLeft ==> 元素相对于父元素的left
obj.offsettop ==> 元素相对于父元素的top
obj.scrollWidth ==> 获取对象的滚动宽度
obj.scrollHeight ==> 获取对象的滚动高度
obj.scrollLeft ==> 设置或获取位于对象左端滚动的距离
obj.scrollTop ==> 设置或获取位于对象顶端滚动的距离

Jq 获取对象的相对高度和宽度

obj.offset().left ==> 元素相对于文档的left
obj.offset().top ==> 元素相对于文档的top
obj.scrollLeft() ==> 设置或返回对象相对滚动条左侧的偏移。
obj.scrollTop() ==> 设置或返回对象相对滚动条顶部的偏移。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
href下载文件根据id取url并下载
May 28 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 #Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 #Javascript
jQuery实现冻结表格行和列
Apr 29 #Javascript
Js实现无刷新删除内容
Apr 29 #Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 #Javascript
jQuery()方法的第二个参数详解
Apr 29 #Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 #Javascript
You might like
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
常用简易JavaScript函数
2009/04/09 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
js闭包用法实例详解
2016/12/13 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python搜索指定目录的方法
2015/04/29 Python
python机器学习之神经网络(三)
2017/12/20 Python
django文档学习之applications使用详解
2018/01/29 Python
Python socket实现简单聊天室
2018/04/01 Python
python生成ppt的方法
2018/06/07 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
Python3 元组tuple入门基础
2020/02/09 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
经典c++面试题六
2012/01/18 面试题
2015元旦家电促销活动策划方案
2014/12/09 职场文书
python基础之类方法和静态方法
2021/10/24 Python