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 简练的几个函数
Aug 29 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 Javascript
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 include,include_once,require,require_once
2008/09/05 PHP
php购物车实现方法
2015/01/03 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
Python实现的最近最少使用算法
2015/07/10 Python
python从入门到精通(DAY 2)
2015/12/20 Python
python中zip()方法应用实例分析
2016/04/16 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
python对于requests的封装方法详解
2019/01/03 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
解决Python安装cryptography报错问题
2020/09/03 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
应届生会计求职信
2013/11/11 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
购房意向书
2014/08/30 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
天气温馨提示语
2015/07/14 职场文书
利用python做表格数据处理
2021/04/13 Python