jQuery中的css()和attr()方法有什么区别？

于 2023-10-04 12:04:42 发布
阅读量166 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： jquery css 前端 编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CyberByte/article/details/133548373
编程 专栏收录该内容
333 篇文章 ¥29.90 ¥99.00
订阅专栏
本文详细介绍了jQuery中css()和attr()的区别。css()方法用于操作元素的样式属性，如颜色、宽度等，而attr()方法用于处理元素的属性，如值、ID等。两者分别通过修改style属性和元素属性值来实现功能。在适当场景下选择正确的方法对于前端开发至关重要。

在jQuery中，css()和attr()是两个常用的方法，用于操作HTML元素的样式和属性。它们之间有一些关键的区别，我将在下面进行详细解释，并提供相应的源代码示例。

  1. css()方法：
    css()方法用于设置或获取HTML元素的样式属性。它接受两个参数，第一个参数是要操作的样式属性的名称，第二个参数（可选）是要设置的属性值。如果只提供一个参数，则该方法将返回指定属性的当前值。

    示例1：获取元素的样式属性

    // HTML: <div id="myDiv" style="color: red;">Hello World</div>
var color = $('#myDiv').css('color'<
了解本专栏 订阅专栏 解锁全文
jquery中prop()方法和attr()方法的区别浅析
12-10
在jQuery中，`prop()`和`attr()`方法都是用于处理元素的属性，但它们之间存在重要的区别，尤其是在处理特定类型的属性时。这篇文章将深入探讨这两个方法的差异，并给出何时使用它们的指导原则。 首先，`attr()`方法...
JQuery中操作Css样式的方法
12-09
代码如下://1、获取和设置样式 $(“#tow”).attr(“class”)获取ID为tow的class属性 $(“#two”).attr(“class”,”divClass”)设置Id为two的class属性。 //2、追加样式 $(“#two”).addClass(“divClass2”)为ID为...
.attr 与. css
Mei12656276的博客
02-22 440
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; body { backgr
jquery attr和css属性
u012365843的专栏
07-02 8166
在jquery里，css和attr都可以动态的修改html中元素的属性。但css()是用来操纵元素style{}的，而attr()是用来操作元素固有的属性的，且attr()的权重比css()要大，它会覆盖css()的样式。例：$("#txt").css("display","none")$("#txt").css({"display":"none","width":"5px",....})
jQuery——attr和css的区别
Searchin_R的博客
10-19 1300
在jquery中，attr和css都和元素样式有关，今天来说一说这两者有什么区别。 css() 方法返回或设置匹配的元素的一个或多个样式属性。 attr即[attribute]的缩写，它是选择器用于选取带有指定属性的元素。 其实，它们之间的区别可以用一句话来概括：即attr设置和获取某个属性值,css设置和获取style中的属性。 下面用代码来说明一下这两者之间的区别。 1.作用不同 ...
关于jQuery的css（）和attr()方法的区别
m0_66927735的博客
04-14 955
1.首先css是设置元素style样式的，意思是只要你能在style里设置的属性我们都可以用css()方法。 $(selector).css(name,value) name 必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性，比如 "color"。 value 可选。规定 CSS 属性的值。该参数可包含任何 CSS 属性值，比如 "red"。 如果设置了空字符串值，则从元素中删除指定属性。 如： //点击按钮切换标签颜色 fun
jquery 中的css()和attr()
kalinux的博客
11-19 379
atr()是用来获取标签属性的,比如&lt;img&gt;中的src,  &lt;input&gt;中的type，value。它对应于js中的getAtrribute(); css()是用来获取style样式的，比如&lt;img&gt;中的width，&lt;input&gt;中的border，opacity。它对应于js中的document.get...style.......
jQuery中attr()方法用法实例
10-24
jQuery的attr()方法是一个非常重要的操作元素属性的方法，它的功能主要分为两大类：获取元素属性值和设置元素属性值。在使用attr()方法时，我们可以根据传入的参数不同，实现不同的操作。这篇文章将详细解释attr()...
css中#和.区别,attr()与css()有何区别和应用
weixin_35846141的博客
08-04 370
jquery中attr()和css()都是用于获取/修改元素的属性，那么我们在使用jq的css与attr两个函数会不会经常搞混淆呢？jquery attr()方法attr() 方法设置或返回被选元素的属性和值。当该方法用于返回属性值，则返回第一个匹配元素的值。当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。语法返回属性的值：$(selector).attr(attribute)设置属...
.attr() 和 .css()
xidongdong1的博客
04-07 867
css: 是设置和获取 style 的。（ .css("display","none") ）var myId = $("#myId"); myId.css("background-color", "red"); // 设置背景颜色为红色 var bg = myId.css("background-color"); // 获取背景颜色相当于：var myId = document.getEl
jquery css attr
weixin_34362991的博客
02-05 82
$("img").attr({ src: "test.jpg", alt: "TestImage" });    //添加样式 $("p").css({ color: "#ff0011",background: "blue" });  //修改样式
jQuery 的.attr()与.css()方法
sanqianheijia的博客
02-10 1315
//.attr应用于元素所有样式，下面以style样式举例 $("#myId").attr("style", "background-color:red"); //但注意会冲抵之前的样式，如下面label标签原有style样式使用上面的话后会失效 <label id="ctl681696" style="display:none">类型</label> //如果同时写两句attr后面会覆盖前面的 $("#myId").attr("style", "display:none"); $.
attr()和css()的区别
qq_36242942的博客
06-13 258
https://blog.youkuaiyun.com/qq_36651893/article/details/64128353
jquery attr()和css()的区别
Ysuer的博客
10-13 537
css设置style里的样式 attr设置属性 例如： $("#txt").css("display","none") $("#txt").css({"display":"none","width":"5px",....}) $("#txt").attr("title","zz")
$().attr() 和 $().css的区别
banjing_1993的博客
03-21 4998
 最近调整前台的时候发现 使用jquery的.attr( )方法去给div隐藏，我是这样写的 $("#div_id").attr("display","none"),发现并没有生效，但是docunment.getElementById("div_id").style("display","none")就生效了。 而且再调试的时候发现，使用$("#div_id").att
jQuery中操作属性的的两个方法：css 与 attr 的用法与区别
前端H5
09-15 460
在jQuery中：css是设置或者修改样式，操作的是style属性 css语法： css(‘属性名’)：获取单个样式 (‘#div1’).css(‘width’)&amp;nbsp;&amp;nbsp;获取的是带有一个dom对象的jQuery对象的宽度(‘#div1’).css(‘width’)&amp;nbsp;&amp;nbsp;获取的是带有一个dom对象的jQuery对象的宽度(‘#d...
jquesry $().attr与$().css区别
qq_29012499的博客
04-21 1357
jquesry ().attr与().attr与().attr与().css区别 1、$().css 实际上是对选择器选中的控件进行外观渲染。那么问题来了，我们一般不都是已经将样式提取到一个*.css文件中了吗？为什么Jquery还要支持css的操作呢？答案是，css文件中定义的css样式，一般都是页面初始化时需要的效果。 比如：要删除table的某一行，当用户点击“删除”按钮时，执行ajax ...
JQuery中css与attr的比较
张兴刚的博客
11-12 1385
我们在使用jq的css与attr两个函数会不会经常搞混淆呢，下面就我就谈谈我在使用两者的经验。 $(‘#boj’).attr(‘src’,’/image/aa.jpg’)这样不禁让我们很困惑，是不是attr可以设置对象的属性height,width等呢？答案是不可能的。 attr是设置和获取属性值的，比如现在有一个div，内容如下： 苹果 香蕉 葡萄 橘子 使用
jQuery中css()和attr()方法的区别
weixin_34355559的博客
06-29 152
方法介绍： css(): html代码： <div class="box" id="box" style="width: 300px;height: 100px;background-color: yellow"></div> jQuery代码： <script type="text/javascript"&...
jquery attr 和 prop方法的区别
最新发布
07-16
<think>我们正在讨论jQuery中attr()和prop()方法的区别。根据提供的引用材料，我们可以总结如下： 1. **历史背景**： - `attr()` 方法从jQuery 1.0开始就存在。 - `prop()` 方法是在jQuery 1.6版本中新增的。 2. **基本概念**： - `attr()` 主要用于操作HTML元素的**属性（attributes）**，这些属性是在HTML标签中定义的，例如：`<input type="checkbox" id="test" checked="checked">`中的`type`、`id`、`checked`都是属性。 - `prop()` 主要用于操作DOM元素的**属性（properties）**，这些属性是DOM对象在JavaScript中拥有的属性。 3. **区别**： - 在jQuery 1.6之前，`attr()`方法既用来获取属性（attributes）也用来获取属性（properties）。但在1.6版本之后，为了更清晰地区分，引入了`prop()`方法专门处理DOM属性（properties）。 - 对于某些属性（如`checked`, `selected`, `disabled`等），在jQuery 1.6之后，建议使用`prop()`方法，因为这些属性在DOM元素中表现为布尔值属性（boolean properties），而使用`attr()`可能会得到字符串（例如`"checked"`）或`undefined`，而`prop()`会返回布尔值（`true`或`false`）。 4. **使用建议**： - 对于HTML标签中存在的属性（如`id`, `class`, `style`, `src`等），使用`attr()`。 - 对于DOM元素的布尔值属性（如`checked`, `selected`, `disabled`等），使用`prop()`。 - 对于自定义的HTML属性（非标准属性），使用`attr()`，因为`prop()`可能无法访问。 5. **示例**： - 获取复选框的选中状态： ```javascript // 使用attr()在1.6之前可以，1.6之后不推荐 var isChecked1 = $(':checkbox').attr('checked'); // 返回"checked"或undefined // 使用prop()推荐 var isChecked2 = $(':checkbox').prop('checked'); // 返回true或false ``` - 设置复选框的选中状态： ```javascript // 使用attr() $(':checkbox').attr('checked', true); // 设置checked属性为字符串"checked" // 使用prop() $(':checkbox').prop('checked', true); // 设置DOM的checked属性为布尔值true ``` 6. **引用材料中的关键点**： - 引用[1]指出：在1.6及以后版本，可以根据需要选择使用`attr()`或`prop()`。 - 引用[2]指出：对于`window`和`document`对象，以及像`checked`这样的属性，应该使用`prop()`代替`attr()`。 - 引用[3]指出：`attr()`可以用于HTML和DOM属性，而`prop()`主要用于DOM属性。 - 引用[4]指出：在jQuery中，attribute和property是两个不同的概念。 因此，总结如下： - 当操作的是HTML标签上定义的属性（attributes）时，使用`attr()`。 - 当操作的是DOM元素的属性（properties，尤其是布尔值属性）时，使用`prop()`。 这样可以避免在jQuery 1.6及以后版本中出现不一致的行为。 §§相关问题§§ 1. 在jQuery中，如何获取一个复选框的选中状态？ 2. 为什么在jQuery 1.6之后，对于`checked`属性推荐使用`prop()`方法？ 3. 如何用jQuery设置一个单选按钮（radio）为选中状态？ 4. `attr()`和`prop()`在性能上有什么区别吗？ 5. 自定义属性（如`data-*`）应该用`attr()`还是`prop()`访问？</think>### jQuery 中 `attr()` 与 `prop()` 方法的区别详解 在 jQuery 中，`attr()` 和 `prop()` 都用于操作元素属性，但存在关键差异： #### 1. **核心概念区分** - **`attr()`** 操作 **HTML 属性**（定义在 HTML 标签中的属性） 例如：`<input type="checkbox" checked="checked">` 中的 `checked` 属性 返回值为 **字符串**（如 `"checked"` 或 `undefined`） - **`prop()`** 操作 **DOM 属性**（JavaScript 对象的内存属性） 例如：DOM 元素的 `checked` 属性（布尔值） 返回值为 **布尔值**（`true`/`false`）或 **原生数据类型** #### 2. **关键差异对比** | 特性 | `attr()` | `prop()` | |------|----------|----------| | **操作对象** | HTML 标签属性 | DOM 对象属性 | | **返回值类型** | 字符串 | 布尔值/原生类型 | | **适用版本** | jQuery 1.0+ | jQuery 1.6+ | | **动态更新** | ❌ 不随状态变化 | ✅ 实时反映状态 | | **布尔属性** | 返回字符串（如 `"checked"`） | 返回布尔值（`true`/`false`） | #### 3. **典型场景示例** ```javascript // 复选框示例 const $checkbox = $(":checkbox"); // 获取选中状态 $checkbox.attr("checked"); // 返回 "checked" (字符串) $checkbox.prop("checked"); // 返回 true (布尔值) // 设置选中状态 $checkbox.attr("checked", "checked"); // 添加 HTML 属性 $checkbox.prop("checked", true); // 修改 DOM 属性 // 禁用按钮 $("button").attr("disabled", "disabled"); // HTML 方式 $("button").prop("disabled", true); // DOM 方式 ``` #### 4. **使用原则** 1. **布尔属性优先用 `prop()`** `checked`, `selected`, `disabled`, `readonly` 等属性： ```javascript // ✅ 正确做法 if ($(":radio").prop("checked")) { ... } // ❌ 避免 if ($(":radio").attr("checked") === "checked") { ... } ``` 2. **标准 HTML 属性用 `attr()`** `id`, `class`, `src`, `href`, `title` 等： ```javascript // 获取图片路径 const src = $("img").attr("src"); // 添加 CSS 类 $("div").attr("class", "active"); ``` 3. **自定义属性用 `attr()`** `data-*` 等自定义属性： ```javascript // 设置 data-id $("li").attr("data-id", 1001); ``` #### 5. **性能与兼容性** - **性能**：`prop()` 直接操作 DOM 属性，通常比 `attr()` 更快 - **兼容性**： - jQuery 1.5 及之前：只支持 `attr()` - jQuery 1.6+：推荐布尔属性用 `prop()` - **特殊对象**：`window` 和 `document` 的属性操作必须用 `prop()`： ```javascript // 获取视口宽度 $(window).prop("innerWidth"); // 获取文档标题 $(document).prop("title"); ``` #### 6. **为什么需要区分？** HTML 属性与 DOM 属性可能不同步： ```html <input type="checkbox" checked> <!-- 初始状态 --> ``` ```javascript $("input")[0].checked = false; // 通过 JS 修改状态 // 此时： attr("checked") // 仍返回 "checked" (HTML未变) prop("checked") // 返回 false (DOM状态更新) ``` > 总结：**操作布尔属性（`checked`/`selected`/`disabled`）或需要实时状态时用 `prop()`；操作标准 HTML 属性或自定义属性时用 `attr()`**。这是 jQuery 官方推荐的最佳实践[^1][^2][^3][^4]。 --- ### 相关问题 1. 如何用 jQuery 正确获取复选框的选中状态？ 2. `data()` 方法与 `attr("data-*")` 有什么区别？ 3. 为什么修改 `disabled` 属性时推荐用 `prop()`？ 4. 在动态生成的元素上，`attr()` 和 `prop()` 哪个更可靠？ 5. 如何用原生 JavaScript 实现类似 `prop()` 的功能？
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值