Js与Jq 获取页面元素值的方法和差异对比


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中undefined与null的区别
Oracle存储过程游标用法分析
Android的webview支持HTML5的离线应用功能详细配置
简单了解Java编程中对异常处理的运用
利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一)
jquery UI Datepicker时间控件的使用方法(基础版)
js中的cookie的读写操作示例详解
Java实现支付宝之第三方支付宝即时到账支付功能
Javascript 鼠标移动上去 滑块跟随效果代码分享
jQuery实现进度条效果代码
数据结构之红黑树详解
Bootstrap轮播加上css3动画,炫酷到底!
ASP.NET MVC5网站开发之添加\删除\重置密码\修改密码\列表浏览管理员篇2(六)
基于.NET程序默认启动线程数讲解
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4