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 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
js实现星星海特效的示例
Sep 28 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连接Oracle数据库
2006/10/09 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
python分析nignx访问日志脚本分享
2015/02/26 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
群众路线领导对照材料
2014/08/23 职场文书
先进党支部事迹材料
2014/12/24 职场文书
天那边观后感
2015/06/09 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
python 模块重载的五种方法
2021/04/24 Python
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang