jquery .width和css("width", )区别

最新推荐文章于 2026-01-08 20:54:44 发布
转载 最新推荐文章于 2026-01-08 20:54:44 发布 · 145 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/guanghe/p/10578277.html
文章标签：

#javascript #ViewUI

博客介绍了jQuery中$.fn.width和$.fn.css(\width\)的区别。$.fn.width计算宽度与盒模型有关，按px计算，返回不带单位的number类型，可计算window和document宽度；$.fn.css(\width\)返回带单位的字符串，不能计算window和document宽度。

1、$.fn.width会根据是否是borderBox来计算新的宽度，如果是borderBox，会额外加上padding和border的宽度，计算时只是按照px来，用rem做单位会出错；

2、$.fn.width返回的是不带单位的number类型，$.fn.css("width")返回的是带单位的字符串；

3、$.fn.width可以计算window和document的宽度，$.fn.css("width")不行。

转载于:https://www.cnblogs.com/guanghe/p/10578277.html

badiu_30394251
关注
jQuery的CSS操作
ma_no_lo的博客
08-16 2346
样式操作和大小操作都属于比较简单，也比较少用的内容，但是位置操作，当然不止这些，在事件中用的比较多，不管是在防抖还是其他优化中都有出现，包括很多页面动态效果都会使用到位置操作，难度也对应高一些。
jQuery.width()和jQuery.css('width')的区别
weixin_34130269的博客
03-18 217
目录 问题描述 调试 总结和补充 问题描述 使用jQuery修改一个div的宽度时，发现$($0).width('10rem')总是修改成不正确的值，然后使用$($0).css('width', '10rem')时却能正确，简单得查阅了下jQuery文档，发现文档里面对$.fn.width的描述是： val为空时是取得第一个匹配元素当前计算的宽度值（px），val不为空时是设置宽度，可以是字...
jQuery--.css("width")和.width()的区别
yoyo的专栏
11-01 3548
首先先解释下普通元素和非普通元素，非普通元素是指window，document这些 元素对象，普通元素是指除window，document这些非普通元素外的元素，如：div对于普通的元素 ，他们的作用相同。比如 网页上有一个 div 元素：  我们可以使用：  $(function(){     var width1 = $("div").css("width");     var width2
JQuery 的 width() 属性和 css('width')的区别
whp404的博客
07-05 657
width() 返回不带有单位的数值，比如400，而css(“width”)返回带有单位的数值 如400px,所以有数值计算的地方都推荐width()方法 $dom.width() 操作的是元素的content width。 $dom.css(‘width’) 操作的是元素的style上的 width。 根据box-size属性的不同， 这个width可能是 content width 也可能是...
详解 $().css('width')和$().width()的区别
weixin_30955617的博客
10-25 571
　　在本次项目开发中，经常用jquery获取高度和宽度并且动态加载，有时候用$().css('width')或$().width()这两个方法获取宽度并设置，但是有时候出现获取不到的情况，查阅资料后发现他俩之间即相同又不同。　　概念：　　 1.$().css() 　　　在w3c jQuery的文档中，$().css()方法设置或返回被选元素的一个或多个样式属性。$().css()在设置多个属性时...
[jQuery][css]通过$("#id").width();设置元素宽度在火狐无效
我是涛锅
05-11 2226
类似如下代码，chrome下正常，可是在Firefox却总是不对$("#id").width(100);解决方案：$("#id").css('width','100px');
jQuery css() 方法
likuoelie的博客
06-26 1073
jQuery 的css()方法是操作 CSS 属性的核心工具，允许您动态获取或设置元素的样式，如颜色、背景色或字体大小。以下是基本用法，帮助您快速上手。
jquery.media及使用方法
03-14
link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> [removed][removed] [removed][removed] [removed] $(function() { $('a.media').media({width:800, height:600}); }); ...
精选资源
bootstrap.min.css&bootstrap.min.js&jquery.rar
05-02
在这个例子中，我们首先引入了Bootstrap的CSS文件来应用样式，然后在文档底部引入jQuery和Bootstrap的JavaScript文件，确保jQuery在Bootstrap之前加载，因为后者依赖于前者。 通过这种方式，开发者可以利用...
jQuery弹层插件jquery.fancybox.js用法实例
10-22
比如，在引用fancybox.js和fancybox.css文件时，可能会因为加载CSS而感到不便，因为大多数jQuery插件并不需要额外的CSS文件。另外，在使用ajax或iframe内容时，必须要注意宽度和高度的设置，以避免兼容性问题。此外...
jQuery 的 countdown 插件
08-25
这个插件基于流行的JavaScript库jQuery构建，为用户提供了一系列灵活的选项和自定义能力，使得在网站上创建各种类型的倒计时变得轻而易举。在本文中，我们将深入探讨jQuery Countdown插件的核心功能、如何使用它以及...
CSS3与jQuery结合的动画效果.zip_CSS3 与 jq 动画_jquery.cslider_thosesem_动画效果
09-25
在IT领域，CSS3和jQuery是两种非常重要的前端技术，它们在网页设计和开发中扮演着不可或缺的角色。CSS3提供了丰富的样式和动画效果，而jQuery则简化了JavaScript的使用，尤其是处理DOM操作和动画效果。当我们把两者...
Vue 2 项目中 template 使用可选链 ?. 导致的诡异编译报错及 webpack loader 配置坑
GhostPaints的博客
01-05 901
最近在维护一个基于 Vue 2 的老项目（RuoYi-Vue 框架衍生）时，遇到一个特别诡异的编译问题：同一个项目，使用 pnpm run dev（连接测试环境）一切正常，但切换到 pnpm run dev:local（连接本地后端）时，启动就直接报错，错误信息指向 template 中的可选链运算符?这让我百思不得其其解——Vue 2.7 明明官方支持 template 中的?.，为什么本地环境就炸了？。
前端组件级权限控制
马优晨
01-06 345
前端组件级权限控制通过统一管理权限数据，采用声明式或编程式方式在组件层面进行校验。核心方案包括：1）指令式控制（适合按钮/小组件），通过自定义指令如v-permission实现；2）组件封装式控制（适合通用组件），封装<Permission>容器组件；3）编程式控制（适合复杂逻辑），在JS中直接判断权限。所有方案都需配合后端接口校验防止权限篡改，并适配不同框架如Vue、React和Angular。关键点是先规范权限数据管理，再选择适合的控制方式，同时确保后端兜底校验。
vue2纯前端使用Docxtemplater生成word报告，包含echart图表，表格
m0_49529959的博客
01-08 288
纯前端使用Docxtemplater生成docx报告，包含echart图表
实现ReACT智能体
weixin_42828342的博客
01-07 1760
本文介绍了LangGraph框架中的两个核心：Human In Loop（人在环中）和Time Travel（时间回溯）。Human In Loop允许将人类操作作为工作流节点，实现模型与人工协作的典型场景包括确认操作、信息补充、审核修改和主动决策分支。实现要点包括指定检查点、线程ID管理和中断/恢复机制。Time Travel功能则基于检查点系统，支持回溯到历史状态重新执行，适用于调试、修复和探索分支等场景。文章还提供了代码示例，展示如何构建带人工审核的AI助手工作流，从简单聊天机器人到集
Vue3研学-watch监视
zhlyxx的博客
01-08 773
Vue 3 的 watch API 提供了多种数据监听方式：1) 监听 ref 基本类型数据时直接监视变量；2) 监听 ref 对象类型需开启 deep 选项；3) reactive 对象默认深度监听；4) 监听对象特定属性需使用 getter 函数。watch 支持配置 immediate 立即执行和深度监听，通过返回的 stop 函数可手动停止监听。与 watchEffect 相比，watch 能更精确控制依赖范围和监听行为，适合处理异步操作和复杂状态变更场景。
【Vue3】我用 Vue 封装了个 ECharts Hooks
最新发布
林恒的博客
01-08 718
📌 ECharts 封装 Hooks 实战 封装 useEchart Hooks 解决重复初始化、事件管理等问题，支持： ✅ 多类型容器（Ref/DOM/选择器） ✅ 自动销毁与响应式更新 ✅ 内置事件绑定/解绑 ✅ ResizeObserver 自适应 核心通过 initChart 初始化，watch 监听配置变化，ResizeObserver 替代传统 resize 事件，并暴露 update/onChartEvent 等 API。大幅简化 ECharts 使用流程，提升开发效率。 （摘要字数：150
jquery .css
12-31
### jQuery `.css` 方法使用教程 #### 设置单个 CSS 属性 可以通过传递两个参数给`.css()`方法来设置单一的CSS属性。第一个参数是要修改的样式名称，第二个参数是该样式的值。 ```javascript $('.box').css(...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值