如何在Javascript中獲取屬性的值

Question

我有這個輸入行，我試圖提取 value 屬性的文本：

    <input type="text" class="card-input small-font" 
ng-value="paymentVia.typeDisplay" readonly="" value="Credit card">

函數getAttribute("class")工作正常，它返回card-input small-font但函數getAttribute("value")返回null 。 我也試過 .value ，但這會返回一個空字符串。

有誰知道為什么會這樣？

這是我的JS：

function() {
   var x = document.getElementsByClassName("card-input small-font");
   var payment =x[18].value;

   return payment;
}

Answer 1

節點值和元素屬性是 html 標簽的不同部分。 因此，您必須改用element.value 。

這是一個示例，向您展示如何從輸入字段中獲取value 、 data 、 attribute 。

HTML 輸入字段。

<input type="text" id="profile" data-nationality="Eritrean" value="Simon">

和 javascript。

var el = document.getElementById("user-profile"); 

console.log(el.value) // Simon
console.log(el.getAttribute("id")) // profile
console.log(el.dataset.nationality) // Eritrean

Answer 2

element.getAttribute("value")返回在標記中設置的值，它不一定與element.value相同。

此外，元素的 value 屬性僅以一種方式同步- 從標記到對象，反之亦然不會發生。

所以，如果要獲取以編程方式設置的值，則需要編寫

element.value

否則，如果您需要獲取在標記中定義的值

<input value="abc">

你需要做element.getAttribute("value")

Answer 3

或者使用 jQuery，您可以從文本框中獲取價值，例如

var val1 = $(".class name").val();//to get value by class name
var val1 = $("#id").val();//to get value by id

兩者都會做同樣的事情。

問候