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 18 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
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/06/15 PHP
解析link_mysql的php版
2013/06/30 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
动手学习无线电
2021/03/10 无线电
jquery tools 系列 scrollable学习
2009/09/06 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
JS正则表达式常见用法实例详解
2018/06/19 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
python调用新浪微博API项目实践
2014/07/28 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
python任务调度实例分析
2015/05/19 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
写自荐信三大法宝
2014/01/24 职场文书
道德模范先进事迹
2014/02/14 职场文书
党员演讲稿
2014/09/04 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
社区活动总结
2015/02/04 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript