在此示例中,有些段落元素的
class ="jtp" 。我们在具有相应类名的段落元素上应用
removeAttr()方法以删除
class 属性。在这里,我们从段落元素中删除了一个
class 属性。
由于我们使用类名为这些段落设置了样式,因此在输出中,我们可以看到单击给定的按钮,由于删除了
class 属性,因此删除了段落样式。
<!DOCTYPE html> <html> <head> <title> jQuery removeAttr() method </title> <script src="/ajax/libs/jquery/1.12.2/jquery.min.js"> </script> <script> $(document).ready(function() { $("button").click(function() { $("p").removeAttr("class"); }); }); </script> <style> .jtp { color: red; background-color: yellow; border: 2px dashed blue; font-size: 25px; } </style> </head> <body> <h1> Welcome to the lidihuo.com </h1> <h2> Example of the jQuery removeAttr() Method </h2> <p id = "para" class = "jtp"> This is first paragraph element. </p> <p id = "para1" class = "jtp"> This is second paragraph element. </p> <p> Click the following button to see the effect. </p> <button> Click me </button> </body> </html>
输出:
Welcome to the lidihuo.com
Example of the jQuery removeAttr() Method
This is first paragraph element.
This is second paragraph element.
Click the following button to see the effect.
Example2
在此示例中,我们从元素中删除了多个属性。这里,有两个
div 元素,它们的
id ="d1",id ="d2" 与同一个类
class ="jtp" 相关。
我们已经使用
class 和
id 属性设置了这些
div 元素的样式,因此在输出中,我们可以看到,单击给定的按钮后,元素的样式由于其
class 和
id 属性的删除而被删除。
<!DOCTYPE html> <html> <head> <title> jQuery removeAttr() method </title> <script src="/ajax/libs/jquery/1.12.2/jquery.min.js"> </script> <script> $(document).ready(function() { $("button").click(function() { $("div").removeAttr("id class"); }); }); </script> <style> .jtp { color: red; font-size: 25px; margin: 10px; } #d1{ border: 2px solid blue; background-color: lightgreen; } #d2{ border: 2px dashed blue; background-color: lightblue; } </style> </head> <body> <h1> Welcome to the lidihuo.com </h1> <h2> Example of the jQuery removeAttr() Method </h2> <div id = "d1" class = "jtp"> This is first div element. </div> <div id = "d2" class = "jtp" > This is second div element. </div> <p> Click the following button to see the effect. </p> <button> Click me </button> </body> </html>