• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > Js与Jq 获取页面元素值的方法和差异对比

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了Js,Jq,获取页面元素等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

以上所述就是本文的全部内容了,希望大家能够喜欢。

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery实现键盘回车搜索功能
  • jQuery实现可编辑表格并生成json结果(实例代码)
  • jquery插件canvaspercent.js实现百分比圆饼效果
  • 如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
  • jquery.validate.js 多个相同name的处理方式
  • 关于jQuery.ajax()的jsonp碰上post详解
  • jQuery Jsonp跨域模拟搜索引擎
  • jQuery序列化后的表单值转换成Json
  • jQuery.form.js的使用详解
  • jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解

相关文章

  • 2017-08-16jQuery animate easing使用方法图文详解
  • 2017-08-16jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
  • 2017-08-16使用jQuery判断IE浏览器版本的代码
  • 2017-08-16Jquery常用的方法汇总
  • 2017-08-16jQuery使用正则验证15/18身份证的方法示例
  • 2017-08-16JQuery页面地址处理插件jqURL详解
  • 2017-08-16jQuery扩展_动力节点Java学院整理
  • 2017-08-16浅析jquery的作用与优势
  • 2017-08-16BootStrap中jQuery插件Carousel实现轮播广告效果
  • 2017-08-16xheditor与validate插件冲突的解决方案

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Confirmer JQuery确认对话框组件
    • jQuery实现简单的列表式导航菜单效果代码
    • jQuery实现checkbox全选的方法
    • jquery 表单下所有元素的隐藏
    • jQuery实现点击按钮文字变成input框点击保存变成文字
    • JQuery页面随滚动条动态加载效果的简单实现(推荐)
    • jQuery中scrollTop()方法用法实例
    • 解决Jquery鼠标经过不停滑动的问题
    • XMLHttpRequest处理xml格式的返回数据(示例代码)
    • jquery 的 $("#id").html() 无内容的解决方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有