如何在Javascript中获取属性的值

Question

我有这个输入行,我试图提取值属性的文本:

<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="foo" data-something="something" value="bar">

和JavaScript.

var el = document.getElementById("foo"); 

console.log(el.value) // bar
console.log(el.getAttribute("id")) // foo
console.log(el.dataset.something) //something

Answer 2

element.getAttribute("value")返回在标记中设置的值，它不一定与element.value.

此外，元素的 value 属性仅以一种方式同步- 从标记到对象，反之亦然不会发生。

所以，如果要获取以编程方式设置的值，则需要编写

element.value

否则，如果您需要获取在标记中定义的值

<input value="abc">

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