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 相关文章推荐
JS启动应用程序的一个简单例子
May 11 Javascript
javascript语言结构小记(一)
Sep 10 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 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
php 中的str_replace 函数总结
2007/04/27 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
用 JSON 处理缓存
2007/04/27 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
PHP面试题集
2016/12/18 面试题
竞选班长演讲稿
2013/12/30 职场文书
班委竞选演讲稿
2014/04/28 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
保证书格式
2015/01/16 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
优秀教师个人总结
2015/02/11 职场文书
python超详细实现完整学生成绩管理系统
2022/03/17 Python
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA