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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
用javascript实现计算两个日期的间隔天数
Aug 14 Javascript
javascript下判断一个元素是否存在的代码
Mar 05 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
JS hashMap实例详解
May 26 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
深入理解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
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python 多线程的实例详解
2017/09/07 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
python async with和async for的使用
2019/06/20 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
环境工程大学生自荐信
2013/10/21 职场文书
本科生求职简历的自我评价
2013/10/21 职场文书
实习教师自我鉴定
2013/12/09 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
师说教学反思
2014/02/07 职场文书
小学同学聚会感言
2015/07/30 职场文书