JavaScript Element.value 与 Element.getAttribute("value")

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17494432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 08:31:37  来源:igfitidea点击:

JavaScript Element.value vs Element.getAttribute("value")

javascripthtmldomattributes

提问by Mehran

I've started learning JavaScript recently but there's something that I'm confused with :

我最近开始学习 JavaScript,但有一些东西让我感到困惑:

what is the different betweenElement.valueandElement.getAttribute("value")?

Element.value之间有什么区别Element.getAttribute("value")

actually my problem is , when I try to copy the value of an inputelement with type of textto another one , if I use the first method (Element.value) It works fine but if I go with the second method It copies the first value given to the element and It never gets updated when I change the text inside the textbox, this behavior seems odd to me ! can you guys please explain what's going on here ?

实际上我的问题是,当我尝试将input类型为 的元素的值复制text到另一个元素时,如果我使用第一种方法 ( Element.value) 它工作正常,但如果我使用第二种方法它会复制赋予元素的第一个值并且当我更改里面的文本时它永远不会更新textbox,这种行为对我来说似乎很奇怪!你们能解释一下这里发生了什么吗?

<html>
<head>
    <meta charset="utf-8">
    <title>Hello JavaScript</title>
    <script src="script2.js"></script>
</head>
<body>
    <input id="Text1" type="text" />
    <input id="Button1" type="button" value="button" />
    <input id="Text2" type="text" />
</body>
</html>

The JavaScript file :

JavaScript 文件:

var myButton;

window.onload = function () {

    myButton = document.getElementById("Button1");
    myButton.onclick = function () {
        var val = document.getElementById("Text1").getAttribute("value");  
        //var val = document.getElementById("Text1").value;
        document.getElementById("Text2").setAttribute("value", val);
    };

};

回答by Naveen Kumar Alonekar

The difference is that element.valueis real time and if a user changes let's say, a textbox input, it will reflect that, and show you the new value.

不同之处在于这element.value是实时的,如果用户更改了文本框输入,它会反映出来,并向您显示新值。

While getAttribute('value')will still show the original value="whateverWasHere"value.

虽然getAttribute('value')仍会显示原始value="whateverWasHere"值。

jsFiddle DEMO

jsFiddle 演示

回答by Denys Séguret

The valueattribute's value is what you set when you write the HTML.

value属性的值是您在编写 HTML 时设置的值。

This attribute's value, when read, is used to fill the element's valueproperty.

属性的值在读取时用于填充元素的value属性

That propertyis what you get afterwards when you use Element.valueand that's what changed by the user or most JavaScript functions. The attributeisn't changed when the user changes the value through the interface.

属性是您在使用之后获得Element.value的,也是用户或大多数 JavaScript 函数更改的内容。的属性,当用户改变通过所述接口的值不改变。

In short, you almost always want to use Element.valueand almost never Element.getAttribute("value").

简而言之,您几乎总是想使用Element.value而几乎从不使用Element.getAttribute("value").