一个简单的例子学习HTTP元素property和attribute的区别

72 阅读1分钟

源代码:

<html>
<style>
</style>

<button disabled>Click</button>
<button>Click Me</button>
</html>

效果如下:

A button’s disabled property is false by default so the button is enabled.

当我们给button添加disabled attribute时,我们实际上给button的disabled property设置了true的初始值。

When you add the disabled attribute, you are initializing the button’s disabled property to true which disables the button.
Test Button
Adding and removing the disabled attribute disables and enables the button. However, the value of the attribute is irrelevant, which is why you cannot enable a button by writing Still Disabled.

将disabled property设置成false即可enable button:

To control the state of the button, set the disabled property instead.

var oEnabled = $0;
10:53:01.273 undefined
10:53:03.086 oEnabled
10:53:03.089 <button>​Click Me​</button>​
10:53:09.699 oEnabled.attributes
10:53:09.718 NamedNodeMap {length: 0}length: 0__proto__: NamedNodeMap
10:53:23.227 var oDisabled = $0;
10:53:23.245 undefined
10:53:25.284 oDisabled
10:53:25.288 <button disabled>​Click​</button>​
10:53:32.870 oDisabled.attributes
10:53:32.882 NamedNodeMap {0: disabled, disabled: disabled, length: 1}0: disabledlength: 1disabled: disabledbaseURI: "file:///C:/Code/git/angular/smallPiece/013-disabled-attribute.html"childNodes: NodeList []firstChild: nullisConnected: falselastChild: nulllocalName: "disabled"name: "disabled"namespaceURI: nullnextSibling: nullnodeName: "disabled"nodeType: 2nodeValue: ""ownerDocument: documentownerElement: buttonparentElement: nullparentNode: nullprefix: nullpreviousSibling: nullspecified: truetextContent: ""value: ""__proto__: Attr__proto__: NamedNodeMap
10:53:57.071 oEnabled.getAttribute('disabled');
10:53:57.104 null
10:54:15.874 oDisabled.getAttribute('disabled');
10:54:15.879 ""
10:54:54.618 oDisabled.disabled = 'false';
10:54:54.620 "false"
10:54:59.600 oDisabled.disabled = '';
10:54:59.638 ""


更多Jerry的原创文章,尽在:“汪子熙”: