溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下html中id屬性和name屬性有哪些區別，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
html中的id屬性
我們使用id屬性可以標識唯一的HTML元素，可以在在URL中用作錨引用（帶#符號的URL），或者在css中用作ID選擇器來設置該元素的樣式。也可以在javascript中，使用getElementById()，通過id屬性值來查找元素，在對元素進行操作。例：
1 2 | <p id="p1">測試文本！測試文本！</p> <p id="p2">測試文本！測試文本！</p> |
1 2 3 | <script> document.getElementById("p2").style.color="red"; </script> |
id屬性是普遍兼容的，對任何元素都有效。且id屬性的值是區分大小寫的，每個id值都應該是唯一的。例：
1 2 3 4 | <div id="demo"> <div id="a">div標簽，id值為a</div> <p id="A">p標簽，id值為A</p> </div> |
1 2 | #a{ color: red;} #A{ color: pink;} |
效果圖：
html中的name屬性
name屬性同樣是用來標識HTML元素的，但它不具有是唯一行，它的值可以重復使用，例：單選按鈕
1 2 3 4 5 6 7 8 | <form action="" method="get"> 最喜歡水果？<br /><br /> <label><input name="Fruit" type="radio" value="" />蘋果 </label> <br /> <label><input name="Fruit" type="radio" value="" />桃子 </label> <br /> <label><input name="Fruit" type="radio" value="" />香蕉 </label> <br /> <label><input name="Fruit" type="radio" value="" />梨 </label> <br /> <label><input name="Fruit" type="radio" value="" />其它 </label> <br /> </form> |
效果圖：
正如上例所示，name屬性經常在表單中使用，用來提交信息；它僅對a, form, iframe, img, map, input, select, textarea等標簽元素有效。
name屬性可以在在javascript中，使用getElementsByName()來查找元素；但無法在CSS或URL中被引用。例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript"> function getElements() { var x=document.getElementsByName("myInput"); alert(x.length); } </script>
<input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <br /> <input type="button" onclick="getElements()" value="名為 'myInput' 的元素有多少個？" /> |
效果圖：
說明：
可以這樣說，ID是一個人的身份證號碼，而Name是這個人的名字。兩者可以同時存在，共享相同的命名空間（兩者的值可以相同）。
看完了這篇文章，相信你對“html中id屬性和name屬性有哪些區別”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
