一个简单的例子学习 HTML 元素property和attribute的区别
源代碼:
<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 ""
下列代碼:
綁定的是 button DOM element 的 disabled property,而不是 attribute.
數據綁定基于 DOM elements,Components 和 directive 的 properties,而不是 HTML attributes.
更多Jerry的原創文章,盡在:“汪子熙”:
總結
以上是生活随笔為你收集整理的一个简单的例子学习 HTML 元素property和attribute的区别的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 基金怎么开户? 基金怎样开账户
- 下一篇: SAP Spartacus 在未登录状态