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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
javascript代码实现简易计算器
Jan 25 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中使用模板的方法
2008/05/24 PHP
php 魔术方法详解
2014/11/11 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
python使用xmlrpc实例讲解
2013/12/17 Python
用Python实现KNN分类算法
2017/12/22 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
python实现猜拳小游戏
2020/04/05 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
劳动竞赛活动总结
2014/05/05 职场文书
创先争优公开承诺书
2014/08/30 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python