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() ==> 设置或返回对象相对滚动条顶部的偏移。
以上所述是小编给大家介绍的Js与Jq获取浏览器和对象值的方法,希望对大家有所帮助!
相关推荐
-
JavaScript中的Navigator浏览器对象
navigator 浏览器对象,包含了正在使用的 Navigator 的版本信息.反映了当前使用的浏览器的资料.JavaScript 客户端运行时刻引擎自动创建 navigator 对象. 更详细的信息可以去查msdn或者Navigator 2.0以后的说明文档,这里我们之做个简单的说明 包括一下几大属性: appCodeName 返回浏览器的"码名"(?),流行的 IE 和 NN 都返回 'Mozilla'. 下面的例子显示了 appCodeName 属性的值: document.w
-
JavaScript入门教程(4) js浏览器对象
更详细的信息可以去查msdn或者Navigator 2.0以后的说明文档,这里我们之做个简单的说明 包括一下几大属性: appCodeName 返回浏览器的"码名"(?),流行的 IE 和 NN 都返回 'Mozilla'. 下面的例子显示了 appCodeName 属性的值: document.write("navigator.appCodeName 的值是" + navigator.appCodeName) appName 返回浏览器名.IE 返回 'Micro
-
浅谈JavaScript 浏览器对象
window window对象不但充当全局作用域,而且表示浏览器窗口. window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度.内部宽高是指除去菜单栏.工具栏.边框等占位元素后,用于显示网页的净宽高.还有一个outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高. 补充: 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:
-
JavaScript浏览器对象之一Window对象详解
JavaScript提供了一组以window为核心的对象,实现了对浏览器窗口的访问控制.JavaScript中定义了6种重要的对象: window对象 表示浏览器中打开的窗口: document对象 表示浏览器中加载页面的文档对象: location对象包含了浏览器当前的URL信息: navigation对象 包含了浏览器本身的信息: screen对象 包含了客户端屏幕及渲染能力的信息: history对象 包含了浏览器访问网页的历史信息. 除了window对象之外,其他的5个对象都是windo
-
js中事件的处理与浏览器对象示例介绍
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>简单的事件处理</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta ht
-
Js与Jq获取浏览器和对象值的方法
JS and Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍. 1.Js获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeight ==> 浏览器可见区域高度 document.body.clientWidth ==> BODY对象宽度 document.body.cl
-
Js与Jq 获取页面元素值的方法和差异对比
JS与Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍. 1.Js获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeight ==> 浏览器可见区域高度 document.body.clientWidth ==> BODY对象宽度 document.body.client
-
Js操作DOM元素及获取浏览器高宽的简单方法
在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素.HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaS
-
Js中安全获取Object深层对象的方法实例
目录 前言 正文 参数 例子 lodash的实现: tokey函数: castPath函数: stringToPath函数: memoizeCapped函数: memoize函数: 完整代码如下: 参考资料: 总结 前言 做前端的小伙伴一定遇到过后端返回的数据有多层嵌套的情况,当我要获取深层对象的值时为防止出错,会做层层非空校验,比如: const obj = { goods: { name: 'a', tags: { name: '快速',
-
原生JS与JQ获取元素的区别详解
这篇文章主要介绍了原生JS与JQ获取元素的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定的元素封装成DOM对象): (1)通过元素ID获取:document.getElementById(),示例如下: 我们在控制台输出,结果如下: 可以
-
JS与jQuery实现子窗口获取父窗口元素值的方法
本文实例讲述了JS与jQuery实现子窗口获取父窗口元素值的方法.分享给大家供大家参考,具体如下: 功能描述:父窗口有一个input,和一个button ,点击button打开子窗口,在子窗口中获取父窗口中input的值,并显示. js: 父窗口: <input type="text" name="currentProjectIDForDetail" id="currentProjectIDForDetail" disabled="
-
js简单获取表单中单选按钮值的方法
本文实例讲述了js简单获取表单中单选按钮值的方法.分享给大家供大家参考,具体如下: HTML部分如下: <form> <tr bgcolor="#FFFFFF"> <td width="84" height="23" rowspan="3" align="center" valign="middle" bordercolor="#999999&qu
-
js智能获取浏览器版本UA信息的方法
js智能获取浏览器版本UA信息的方法 /* * 智能获取浏览器版本信息 * */ var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit:
-
JS获取Table中td值的方法
本文实例讲述了JS获取Table中td值的方法.分享给大家供大家参考.具体如下: 1.当要获取多行中的任意TD时,采用给每个TD设置一个共同的class 复制代码 代码如下: <tr> <td style="display: none" id="td2">002</td> <td style="text-align: left;text-decoration:underline;" i
-
一览画面点击复选框后获取多个id值的方法
在web开发中经常会遇到一览画面中每一条记录前都带一个复选框,点击后选中该条记录进行删除.修改.查看等操作. 修改和查看都是获取一条记录的id值后传递到后台进行查询获取该记录对象的各种属性值,再显示到画面上. 我说的重点是选中多条记录后进行批量删除,如何获取多条记录的id值是问题的关键.首先是在jsp页面中全选中复选框的方法. 代码如下: function checkEvent(name, allCheckId) { var allCk = document.getElementById(all
随机推荐
- 浅谈CMD和win powershell的区别
- perl 调试命令的相关知识小结
- ThinkPHP与PHPExcel冲突解决方法
- php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
- 杏林同学录(八)
- 深入浅析C语言中堆栈和队列
- Android游戏开发学习②焰火绽放效果实现方法
- MySQL事务处理与应用简析
- Mysql中日期和时间函数应用不用求人
- JQuery 浮动导航栏实现代码
- 使用变量动态设置js的属性名
- 求解开jscript.encode代码的asp函数
- Hibernate一对多关联双向关联代码实现分享
- C和C++ const的声明差异
- redirect_uri参数错误的解决方法(必看)
- Android学习教程之日历控件使用(7)
- Android中Permission权限机制的具体使用
- 网吧ADSL维护指南
- Ubuntu系统下扩展LVM根目录的方法
- Sql Server 开窗函数Over()的使用实例详解