Js与Jq获取浏览器和对象值的方法


Posted in Javascript onMarch 18, 2016

JS and 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() ==> 设置或返回对象相对滚动条顶部的偏移。

以上所述是小编给大家介绍的Js与Jq获取浏览器和对象值的方法,希望对大家有所帮助!

Javascript 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 #Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 #Javascript
javascript 继承学习心得总结
Mar 17 #Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 #Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 #Javascript
jquery基础知识第一讲之认识jquery
Mar 17 #Javascript
Angularjs 滚动加载更多数据
Mar 17 #Javascript
You might like
下载文件的点击数回填
2006/10/09 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
介绍一下Make? 为什么使用make
2016/07/31 面试题
建筑施工实习自我鉴定
2013/09/19 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
健康状况证明书
2014/11/26 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
Golang 遍历二叉树
2022/04/19 Golang
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers