• 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 获取页面元素值的方法和差异对比

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了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使用方法详解

相关文章

  • jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
  • JQuery设置文本框和密码框得到焦点时的样式
  • artDialog双击会关闭对话框的修改过程分享
  • jQuery jcrop插件截图使用方法
  • jQuery的初始化与对象构建之浅析
  • jQuery可见性过滤选择器用法示例
  • jQuery-1.9.1源码分析系列(十)事件系统之事件包装
  • jQuery中last()方法用法实例
  • jQuery选择器全集详解
  • jquery 简单应用示例总结

文章分类

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

最近更新的内容

    • jQuery中extend函数详解
    • jquery datatable服务端分页
    • jQuery删除一个元素后淡出效果展示删除过程的方法
    • jquery select(列表)的操作(取值/赋值)
    • jQuery+ajax读取并解析XML文件的方法
    • jquery validate poshytip 自定义样式
    • jquery实现点击展开列表同时隐藏其他列表
    • jquery统计输入文字的个数并对其进行判断
    • jQuery动画效果图片轮播特效
    • jQuery+css实现百度百科的页面导航效果

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

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