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

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

时间: 2024-10-19 00:24:58

Js与Jq 获取浏览器和对象值的方法的相关文章

【整理】原生js和jQ获取窗口宽高及滚动条的方法和函数

原生js和jQ获取窗口宽高及滚动条的方法和函数 一.原生js获取 1.实际宽高(不包括工具栏,滚动条的视口高度,ie6.7.8不支持) window.innerHeight window.innerWidth 2.显示屏宽高 screen.height screen.width 3..显示屏宽高(除windows任务栏之外的高度)屏幕可用工作区 screen.avaiHeight screen.availWidth 4.网页可见区域宽高 document.body.clientWidth doc

JS兼容方式获取浏览器的宽度

<script type="text/javascript"> //need to wait until onload so body is available window.onload = function(){ function getWindowWidth(){ if (window.innerWidth){ return window.innerWidth; } else if (document.documentElement.clientWidth){ ret

js模拟jq获取id

js模拟jq获取id: (jquery)需要自己添加 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js模拟jq的点击效果</title> <style> * {margin: 0; padding: 0;} #btn {display:block;height: 30px; width:

三个获取浏览器URL中参数值的方法

这三个是一般的获取浏览器传的参数值的方法,之前有用unescape()解码的方法,但是遇到汉字会产生乱码,所以用decodeURI(); 方法一: function getQueryString(name) { //获取url方法 编辑传来的参数 //之前decodeURI是用的unescape() 有时候会取汉字乱码 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r

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

获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeight ==> 浏览器可见区域高度 $(document).width() ==> 浏览器可见区域宽度$(document).height() ==> 浏览器可见区域高度 获取对象的高度和宽度 obj.width = obj.style.width   ==> 获元素内容宽度obj.cl

原生JS 和 JQ 获取滚动条的高度,以及距离顶部的高度

JQ:相对比较简便 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度 : $(document).width(); 浏览器当前窗口文档body的高度: $(document.body).height(); 浏览器当前窗口文档body的宽度: $(document.body).width(); 获取滚动条

Ajax中通过JS代码自动获取表单元素值的示例代码

我们在使用Ajax的时候,通常需要获取表单元素值,然后发送给后台的服务器端程序处理.如果表单元素不多的情况我们常常会通过GET方式来获取表单元素值,但如果表单元素非常多,此时就需要用POST方式来获取表单元素值,那么如何来获取表单元素值呢?下面给出一段JS代码即可自动获取表单元素的值了 http://www.qidian.com/BookReader/1839917,60421843.aspx http://www.qidian.com/BookReader/1839917,60422045.a

js和jq获取父,兄弟,子节点

1,js获取节点: 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 lastChild 获得最后一个子节点 兄弟:previousSibling 获取已知节点的前一个节点 nextSibling 获取已知节点下一个节点 2,jq获取节点: 父: $('#').parent() 获取上一级的父节点. $('#items').parents('.parent1')获取上面哪一级

js,jq获取父,兄弟,子节点整理

js获取节点 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 lastChild 获得最后一个子节点 兄弟:previousSibling 获取已知节点的前一个节点 nextSibling 获取已知节点下一个节点 jq获取节点 父: $('#').parent() 获取上一级的父节点. $('#items').parents('.parent1')获取上面哪一级父节点都可以