獲取input標籤的全部屬性

時間 2020-07-06

標籤獲取 input 標籤全部屬性简体版

原文原文鏈接

1.用jquery
$("input[name='btnAdd']").attr("value") javascript

獲取value屬性值，其它屬性換attr的參數就OKhtml

例1：java

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="box">
<span>點擊按鈕獲取文本框的name屬性值：</span><br>
<div class="content">
<input type="text" name="test" value="這個文本框的name屬性值爲test">
</div>
<input type="button" class="btn" value="獲取文本框name值">
</div>
<script>
$(function(){
$("input:button").click(function() {
alert($("input:text").attr("name"));
});
})jquery

</script>
</body>
</html>chrome

例2：測試

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="testDivID" name="testDivName" value="divTagValue" defMyTag="Lionbule">1</div>
<script>
(function(){
var id = document.getElementById("testDivID").attributes["id"].value;
var name = document.getElementById("testDivID").attributes["name"].value;
var value = document.getElementById("testDivID").attributes["value"].value;
var myTag = document.getElementById("testDivID").attributes["defMyTag"].value;
alert(id +" "+ name +" "+value+" "+myTag);
})();
</script>
</body>
</html>this

在IE八、Firefox3.六、Chrome6.0下測試經過。換句話說，用上述獲取標籤屬性值的方式通用、可靠。spa

但在實驗過程當中出現一個問題。若是div容器的內容爲空或空格，則只有chrome能正常執行，IE、firefox均報出「document.getElementById("testDivID") is null.」。因此我在例子中特地寫了個1，無奈而爲之。firefox

獲取html中任意標籤的屬性值都可採用以下方式：orm

document.getElementById("xxx").attributes["***"].value;

------------------------------------------------------------------------------------------------------------------------

2.經過點來獲取：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="form1" name="form1">
<input name="n1" type="text" />
<input name="n3" type="text" />
<input name="n4" type="text" />
</form>

<script>
window.onload = function(){
var inputs = document.form1.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
inputs[i].onclick = function(){
alert(this.name);
};
}
};

</script>
</body>
</html>

例：

<SCRIPT LANGUAGE="JavaScript">
function showTable(id){
var tb=document.getElementById(id);
var rows=tb.rows;
for(var i=0;i<rows.length;i++){
var cells=rows[i].cells;
for(var j=0;j<cells.length;j++){
alert("得到的$(cells[j]).attr('name'):"+$(cells[j]).attr("name"));
if ($(cells[j]).attr("name")=="god"){
alert("name=" +cells[j].childNodes[0].name +" value="+ cells[j].childNodes[0].value + " hidden=" +cells[j].childNodes[0].hidden ); //.hidden返回的是true/false
}
}
}
}

function showTd(id){
var td=document.getElementById(id);
var cell=td.parentElement;
var cells=cell.cells;
alert("cell.cells:"+cell.cells+" ,cell:"+cell);
alert("cells[0]:"+cells[0]+" ,$(cells[0]).attr('name'):"+$(cells[0]).attr('name'));
alert("cells[0].childNodes[0].name:"+cells[0].childNodes[0].name);
alert(cells[0].cellIndex);
}

//<input>的name屬性能夠經過.name來獲取，而<td>的那麼屬性不能，但能夠經過attr("name")來獲取

</SCRIPT> </body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。