Js和JQ求对象尺寸的几个方法

最新推荐文章于 2024-07-16 16:50:55 发布
最新推荐文章于 2024-07-16 16:50:55 发布
阅读量245 收藏
点赞数
分类专栏： javascript&&jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdnear/article/details/76794502
版权

                                               

Width:

                  content          padding               border               margin

jascript    -      style.width < clientWidth    < offsetWidth                空
                            |                      |                          |                         |

JQ           -      width( )      < innerWidth( )  < outerWidth( ) < outerWidth( true )

                            |                     |                           |                         |

结果        -         100                120                      130                    170

-----------------------------------------------------------------------------------------------

 

Height:

                        content            padding             border                 margin

jascript    -      style.height < clientHeight   < offsetHeight               空

                            |                     |                            |                          |

JQ           -      Height( )     < innerHeight( )  < outerHeight( ) < outerHeight( true )

                            |                     |                            |                          |

结果        -         100                120                       130                    170


*其中style.width和style.height只在有行内样式时返回100px，需要用  parseInt（）把单位（px）去掉。


client = 内容+内边距；

offset = 内容+内边距+边框；

inner = 内容+内边距；

outer = 内容+内边距+边框；

outer(true) = 内容+内边距+边框+外边距；

 

瓶子里的海怪
关注
专栏目录
JavaScript中获取对象属性的几种方法举例及其说明
闲岁的博客
11-12 7529
首先我们有这样一个对象： var o = {}; var c = Symbol(); Object.defineProperties(o, { a: { value: 1, }, b: { enumerable: true, configurable: true, value: 5, }, [c]: {
Js与Jq 获取页面元素值的方法和差异对比
10-24
本文将详细介绍通过JS和jQuery获取浏览器窗口尺寸、页面元素尺寸、以及元素相对位置的方法，并对比两者之间的差异。 1. 获取浏览器窗口的高度和宽度 原生JS提供了几种方式来获取浏览器窗口的尺寸： - `document....
js：用js封装jq常用的几个方法
小陈的博客
05-31 827
简单封装几个JQ的功能 前言 jq(jquery)是一个便捷的，简化js代码的，有着丰富选择器的js框架。在vue和react框架前之前，jq几乎是web开发的必备框架。当然随着数据双向绑定的出现，更加简化了数据和DOM节点的操作，vue和react取代了jq的地位。 虽然说jq已不再是主流，但是在一些比赛，一些项目中依然有出现。比如h5交互融媒体比赛，比赛只允许使用原生js，可以简单封装几个，简化一下代码 封装几个jq的功能 $()函数、dom.css方法、dom.html()方法、dom.on()方法。
通过js和jq的学习自己 封装一个message提示的插件
qq_36571836的博客
09-21 732
自己封装一个message的插件 效果要求如下 html代码块如下：分别有几个按钮，点击不同的按钮会显示不同的提示信息 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190921175201609.png) <input type="button" value="信息提醒" class="btn-info"/> <input ...
【JavaScript/jQuery】js判断对象是否为空对象的几种方法
Umbrella_Um的博客
05-25 1730
1. 将json对象转化为json字符串，再判断该字符串是否为"{}" var data = {}; var b = (JSON.stringify(data) == "{}"); alert(b);//true 2. for…in 循环判断 var obj = {}; var b = function() { for(var key in obj) { return false } return true } alert(b());//true 3. es6针对对象增加了3
jq 对象的 attr 和 data 方法
weixin_34080571的博客
03-21 569
有一定基础的前端一定对 jq 中的 attr() 和 data() 方法不陌生，attr() 可以获取 html 元素的属性，其中包括自定义属性（data-xxx） <div class="test" a="a" data-id="1"></div> <script> $('div').attr('a'); // a ...
原生js和jq操作元素和元素属性的几个方法+img图片格式+RGB色彩描绘
m0_52669454的博客
09-05 419
原生js和jq操作元素和元素属性的几个方法+img图片格式+RGB色彩描绘
js和jquery数组和对象遍历方法
qq_43579525的博客
05-28 813
方式一： 原生的 js 循环 1.while 循环: While语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。 while (条件) 语句; // 或者 while (条件) 语句; //举例： var i = 0; while (i < 100...
js:封装几个JQ的功能
jayLog的博客
04-29 525
jq(jquery)是一个便捷的，简化js代码的，有着丰富选择器的js框架。在vue和react框架前之前，jq几乎是web开发的必备框架。当然随着数据双向绑定的出现，更加简化了数据和DOM节点的操作，vue和react取代了jq的地位。
jq js json 转字符串_JS - JSON对象与JSON字符串相互转换的几种方法
weixin_32380307的博客
01-27 283
2，使用json2.js进行转换如果想要兼容早期版本的IE浏览器，比如：ie8(兼容模式)、ie7、ie6。可以下载使用 json2.js，具体地址参考前面内容。使用方式和上面一样。var jsonStr = JSON.stringify(jsonObj);3，使用jQuery进行转换首先对 jQuery 进行扩展，增加个 json 对象转字符串的方法。jQuery.extend({stringi...
js中数组对象去重的几种方式
3000
07-16 524
在 JavaScript 中，可以使用多种方法对数组中的对象进行去重。可以通过 .set() 方法添加键值对，通过 .get() 方法获取值，通过 .delete() 方法删除键值对。Map 是一种键值对的集合，其中每个键唯一对应一个值，类似于对象，但有更灵活的键类型。Set 是一种集合，用于存储唯一值，即集合中的每个元素都是唯一的，不允许重复。不像数组，Set 中的元素没有顺序，不能通过索引访问。可以存储任意类型的值，包括基本类型和对象引用。保留元素的插入顺序，可以通过键来访问对应的值。
js/jquery遍历对象和数组的方法分析【forEach，map与each方法】
01-21
本文实例讲述了js/jquery遍历对象和数组的方法。分享给大家供大家参考，具体如下： JS forEach方法 arr[].forEach(function(value,index,array){ 　//do something }) 参数：value数组中的当前项,index当前项的...
JQ 删除字符串最后一个或几个字符的方法.rar
09-16
总结起来，尽管jQuery没有直接提供删除字符串最后一个或几个字符的功能，但我们可以通过结合JavaScript的字符串方法和正则表达式轻松实现。在实际开发中，理解这些基础的JavaScript操作对于优化jQuery代码至关重要。...
jQuery中判断对象是否存在的方法汇总
11-22
本文将详细探讨几种有效的jQuery方法以及JavaScript原生方法来完成这个任务。 首先，我们来看一下为什么直接使用`if($("#id"))`是不准确的。在jQuery中，`$("#id")`是一个选择器，它会尝试找到ID为"id"的元素。即使...
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
12-12
1.jquery grep()筛选遍历数组(可以得到反转的数组) // 1.jquery grep()筛选遍历数组(可以得到反转的数组) var array = [1,5,9,3,12,4,48,98,4,75,2,10,11]; var filterArray = $.grep(array,(currentValue) => { ...
基于龙伯格（Luenberger）观测器的无感FOC电机矢量控制MATLAB Simulink仿真模型
10-06
基于龙伯格（Luenberger）观测器的无感FOC电机矢量控制MATLAB Simulink仿真模型 通过龙伯格观测器，我们可以在不直接测量转子角度的情况下，通过已知的电机电流、电压来估算转子角度。这种方法在控制理论和实际电机控制中具有广泛的应用，尤其是在无传感器的情况下。
web端实现《别踩白块》小游戏
10-06
通过JS实现web的《别踩白块》小游戏
python经典实例代码汇总+100例
最新发布
10-06
python经典实例代码汇总+100例
阵列天线泰勒综合法降低副瓣电平的matlab源代码
10-06
clear clc % 参数设置 Freq =30*(1e9); %频率 v_0=3*10^8;%光速 lamda = v_0/Freq ; % 波长 d = lamda * 0.6; % d为阵元间距 theta0 = (90/180)*pi; % 扫描角度 theta = 0: 0.01 : pi; % Θ为方向角 u = pi*d*(cos(theta)-cos(theta0))/lamda; %T = Chebyshev; % T为切比雪夫恒等式系数矩阵 N = 16; % N为直线阵的阵元数量，M为一侧的单元数(对称) R0dB = 20; % R0dB为副瓣电平 nbar=9; %相等电平副瓣数目 if (mod(N,2)==0) M = N / 2; parity = 0; % parity为奇偶性，0为偶数
原生JavaScript无Jq实现详细月历代码实例
它通常会包含以下几个部分： - **事件监听**: 通过`addEventListener`方法监听`prev`和`next`按钮的点击事件，以切换月份。 - **日期显示**: 在`.date`元素中动态显示当前日期，可能使用`Date`对象和数组来处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值