专栏首页前端之攻略jquery 与javascript 获取元素尺寸大小的对比

jquery 与javascript 获取元素尺寸大小的对比

jquery获取尺寸的方法 width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。 height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

innerWidth() 方法返回元素的宽度(包括内边距)。 innerHeight() 方法返回元素的高度(包括内边距)。

outerWidth() 方法返回元素的宽度(包括内边距和边框)。 outerHeight() 方法返回元素的高度(包括内边距和边框)。

js获取尺寸的方法 clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。

Window 尺寸 有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari: window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8、7、6、5: document.documentElement.clientHeight document.documentElement.clientWidth 或者 document.body.clientHeight document.body.clientWidth

屏幕 尺寸 screen.availWidth - 可用的屏幕宽度(不包含下面的任务栏,包含上面的浏览器地址等所有上面的部分) screen.availHeight - 可用的屏幕高度(不包含下面的任务栏,包含上面的浏览器地址等所有上面的部分) screen.height-屏幕高度(包含整个屏幕,如电脑的大小是1920*1080,屏幕高度就是1080)

clientWidth = width + padding offsetWidth = width + padding + border

1.offsetWidth属性可以返回对象的padding+border+width属性值之和,style.width返回值就是定义的width属性值。

2.offsetWidth属性仅是可读属性,而style.width是可读写的。

3.offsetWidth属性返回值是整数,而style.width的返回值是字符串,并且带有单位。

4.style.width仅能返回以style方式定义的内部样式表的width属性值。

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 正则表达式总结 原

    [总结] 主要区分match具有g和没有g的区别.然后没有g的时候与exec是等价的. 而exec返回的串类型不受g影响但具有g时候会驱动lastIndex...

    tianyawhl
  • 时间字符串格式化 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • js 控制div 元素 随着窗口的变化,保持长宽比例不变

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • HDUOJ----4502吉哥系列故事——临时工计划

    吉哥系列故事——临时工计划 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/3276...

    Gxjun
  • 数据分析必备:掌握这个R语言基础包1%的功能让你事半功倍!(附代码)

    [ 导读 ]无论数据分析的目的是什么,将数据导入R中的过程都是不可或缺的。毕竟巧妇难为无米之炊。utils包是R语言的基础包之一。这个包最重要的任务其实并不是进...

    数据派THU
  • C#基础知识回顾--BackgroundWorker介绍

    简介 BackgroundWorker是.net里用来执行多线程任务的控件,它允许编程者在一个单独的线程上执行一些操作。耗时的操作(如下载和数据库事务)在长时间...

    hbbliyong
  • .Net 跨平台可移植类库正在进行

    [原文发表地址] Cross-Platform Portable Class Libraries with .NET are Happening [原文发表时间...

    张善友
  • Args4j的使用

    项目中使用了Args4J来管理命令行参数.所以我来学习一下,做个Demo,了解其基本使用方式.

    呼延十
  • ffmpeg和ijkplayer里的skip_loop_filter

    后面会跟-16/0/8/16/24/32/48, 意思如下图AVDiscard释义, 其中48是指'AVDISCARD_ALL', 所有帧都不做环路滤波.

    望天
  • JavaScript——类型检测

    要检测一个变量是否是基本数据类型,可以用 Typeof 操作符。如果我们想知道它是什么类型的对象,我们可以用instanceof 操作符,语法如下所示:

    喝茶去

扫码关注云+社区

领取腾讯云代金券