问题描述
调试
总结和补充

问题描述

使用jQuery修改一个div的宽度时，发现$($0).width('10rem')总是修改成不正确的值，然后使用$($0).css('width', '10rem')时却能正确，简单得查阅了下jQuery文档，发现文档里面对$.fn.width的描述是：

val为空时是取得第一个匹配元素当前计算的宽度值（px），val不为空时是设置宽度，可以是字符串或者数字，还可以是一个函数。

刚开始还以为是$.fn.width只支持px，对rem支持不好，后来跟踪了一下源码发现想法错了。

调试

我使用的是jquery-v1.11.1.js。

Chrome控制台下输入$.fn.width定位到10206行：

在这个地方打一个断点，输入$($0).width('10rem')开始跟踪，进入了jQuery.style( elem, type, value, extra )，继续往下，发现经过如下代码时val发生了变化，变成了一个错误的值，10rem变成了34rem：

看来就是这个hook引起的，重新来一次，按下F11进入hook看一下，进入了$.cssHooks.width.set：

看到了一个很关键的方法augmentWidthOrHeight（扩大宽度或者高度），很显然问题出在这里，没有特别仔细看，大概逻辑是，如果borderBox，那么val减去padding和border的值，如果不是，那么加上：

测试的$0的宽高度如下，因为没有border，所以这里计算出来就是paddingLeft+paddingRight，也就是-24：

再看setPositiveNumber方法，里面强行把10rem中的10跟上面计算出来单位为px的-24相减！难怪会出错：

return 10(单位是rem) - (-24(单位是px)) + 'rem'；

说白了就是jQuery这个hook只能处理单位是px的，单位是其它的就有问题了。那么回到最开始，$.fn.width和$.fn.css('width')有啥区别呢？

可以发现，$.fn.width最终调用的是jQuery.style( elem, type, value, extra )，$.fn.css调用的是jQuery.style( elem, name, value )，唯一的差别是前者多了一个extra。

总结和补充

$.fn.width会根据是否是borderBox来计算新的宽度，如果是borderBox，会额外加上padding和border的宽度，计算时只是按照px来，用rem做单位会出错；
另外，$.fn.width返回的是不带单位的number类型，$.fn.css('width')返回的是带单位的字符串；
通过源码还可以发现，$.fn.width可以计算window和document的宽度，而后者不行。

如有不正确或者需要补充的地方，欢迎指正！

jQuery.width()和jQuery.css('width')的区别相关推荐

jQuery 样式操作||操作 css 方法/设置类样式方法
操作 css 方法 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
jquery如何去掉css,jQuery教程之jQuery去掉一个CSS属性
本篇文章探讨了jQuery教程之jQuery去掉一个CSS属性,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < 1.什么事JQ? 一个优秀的js库,大型开发必备 2.J ...
jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏菜单
jquery折叠菜单.jquery侧边栏菜单.CSS侧边栏菜单一.Jquery折叠菜单效果二.jquery侧边栏菜单效果三.CSS侧边栏菜单效果先上代码 <!DOCTYPE html&g ...
【08】jQuery：01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
jQuery过滤选择器:first和:first-child的区别，CSS伪类:first-child
最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...
关于JS下offsetLeft，style.left，以及jquery中的offset().left，css(left)的区别。
最近因为工作需要,仔细研究了一下关于JS下offsetLeft,style.left,以及jquery中的offset().left,css("left")的区别. JS下的off ...
如何通过jQuery动态设置元素CSS的样式，以及HTML中CSS “内联式”、“嵌套式”、“外联式”使用方法
html元素使用CSS渲染标签的样式,可以通过内联式.嵌套式.外联式来将CSS样式添加到html中.有时候涉及到动态的参数,或者在事件中需要修改不同元素的CSS样式时,可以通过js获取目标元素,再其修 ...
jquery和JavaScript之间的联系和区别
文章目录前言一.本质区别二.用法区别 1.获取内容 2.设置css样式 3.属性(增删查) 总结前言在学习jQuery的之前,就对JavaScript已经进行了深入的学习.但是,对jQuer ...
跟着JQuery API学Jquery 之四 css
在javascript中我们常常要改变dom的css样式 ,同样Jquery也对改变css做了封装不用我们去用 getElementByid().style.--来操作了 1 css 这里只有一个函数 ...

jQuery.width()和jQuery.css('width')的区别

问题描述

调试

总结和补充

jQuery.width()和jQuery.css('width')的区别相关推荐

最新文章

热门文章