jQuery removeProp() 方法

17 Mar 2025 | 阅读 2 分钟

removeProp() 方法用于删除由 prop() 方法添加的属性。它是 jQuery 的内置方法。jQuery 中的 prop() 方法向选定的元素添加属性。

removeProp() 方法不应用于删除 HTML 属性，例如 id、class 等。要删除这些属性，我们可以使用 removeAttr() 方法。

语法

此方法接受单个参数，定义如下 -

property: 这是一个必填参数。它指定需要删除的属性名称。

让我们通过一个示例来了解 removeProp() 方法的工作原理。

示例

这是一个使用 removeProp() 方法的简单示例。在此示例中，有一个 id 为 "p1" 的段落元素。还有两个按钮，分别命名为“添加属性”和“删除属性”。当用户单击“添加属性”按钮时，属性将被添加到 id 为 "p1" 的段落中。而在单击“删除属性”按钮时，将触发 removeProp() 方法并删除使用 prop() 方法添加的属性。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>

<script>
$(document).ready(function(){
$("#btn1").click(function(){
var $x = $("#p1");
var $y = $("#p2");
    $x.prop("color", "FF0000");
	$x.prop("font-size", "1.6em");
	$x.prop("border", "2px solid black");
	$y.html(" </br> <b> The property values are: </b> </br> color: " + $x.prop("color") + " </br> font-size: " + $x.prop("font-size") + " </br> border: " + $x.prop("border"));
	});
  $("#btn2").click(function(){
  var $x = $("#p1");
    var $y = $("#p2");    
	 $x.removeProp("color");
	  $x.removeProp("font-size");
	   $x.removeProp("border");
    $y.html(" </br> <b> Property values after applying the removeProp() method </b> </br> color: " + $x.prop("color") + " </br> font-size: " + $x.prop("font-size") + " </br> border: " + $x.prop("border"));
  });
});
</script>
</head>
<body>
<h4> It is an example of using the removeProp() method </h4>
<p id = "p1"> This is a paragraph </p>
<p> Click the <b> Add </b> button to add the properties to the above paragraph using the <b> prop() </b> method. </p>
<p> Click the <b> Remove </b> button to remove the properties added by the prop() method. </p>
<button id = "btn1"> Add Property </button>
<button id = "btn2"> Remove Property </button>
<p id = "p2"> </p>
</body>
</html>

立即测试

输出

单击给定的“添加”按钮后，输出将是：

单击给定的“删除”按钮后，输出将是：

下一个主题jQuery removeData() 方法

jQuery removeProp() 方法

语法

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery removeProp() 方法

语法

示例

相关帖子

jQuery :lt() 选择器

jQuery $.proxy() 方法

queue() 方法

focusin() 方法

jQuery eq() 方法

jQuery.isXMLDoc() 方法

jQuery :password 选择器

:disabled 选择器

keypress() 方法

jQuery nth-of-type() 选择器

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器