在jquery中,可用attr()或prop()給元素增加屬性,語法「物件.attr("屬性名稱","值")」或「物件.prop("屬性名稱", "值")」;可用removeAttr()刪除屬性,語法「物件.removeAttr("屬性名稱")」。
本教學操作環境:windows7系統、jquery3.2.1版本、Dell G3電腦。
jquery增加和刪除屬性的方法
#1、使用attr()或prop()增加屬性
prop()和attr() 都可用來設定元素的HTML 屬性的。
範例1:使用attr()增加disabled屬性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $("textarea").attr("disabled", "disabled"); // $("textarea").attr("disabled","true"); }); }); </script> </head> <body> <textarea></textarea><br><br> <button>让textarea不可编辑</button> </body> </html>
#範例2:使用prop()增加readonly屬性
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $("input").attr("readonly","readonly"); }); }); </script> <style type="text/css"> .intro { font-size: 120%; color: red; } </style> </head> <body> <input type="text" value="hello"/><br /><br /> <button>给input添加只读属性</button> </body> </html>
2、使用removeAttr()刪除屬性
#removeAttr() 方法從被選元素中移除屬性。
範例:使用removeAttr()刪除hidden屬性
hidden 屬性規定對元素進行隱藏。隱藏的元素不會被顯示。
刪除該屬性,可讓元素顯示。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-3.2.1.min.js"></script> <script> $(function () { $("button").click(function () { $("p").removeAttr("hidden"); }) }) </script> </head> <body> <p>这是一段可见的段落。</p> <p hidden="hidden">这是一段被隐藏的段落,现在显示出来了。</p> <p>这是一段可见的段落。</p> <button>删除hidden属性</button> </body> </html>
相關教學推薦:jQuery影片教學
以上是jquery怎麼增加和刪除屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!