Attribute and property in HTML

Source: Internet
Author: User

I. Overview

Attribute and property are two concepts that are often confused.

In simple terms, the property is accessed in the JS code:

Document.getelementbytagname (' my-element '). Prop1 = ' Hello ';

Attribute similar to this:

<my-element attr1= "Cool"/>

The way to access attribute in JS code is getattribute and setattribute:

Document.getelementbytagname (' my-element '). SetAttribute (' attr1 ', ' Hello ');

Document.getelementbytagname (' my-element '). getattribute (' attr1 ', ' Hello ');

Second, the difference

In most cases, the two are equivalent. In web standards, it is often stated that a attribute "reflects" a property of the same name. But the exception is still a lot of things.

1. Inconsistent names

The most typical is classname, in order to avoid javascript reserved words, JS with class attribute corresponding property is classname.

<div class= "Cls1 cls2" ></div>


var div = document.getelementbytagname (' div ');

Div.classname//CLS1 CLS2


2. Inconsistent type

The most typical type is style, which does not accept string assignments.

<div class= "Cls1 cls2" style= "Color:blue" ></div>


var div = document.getelementbytagname (' div ');


3. Semantic inconsistency

such as the href attribute of the A element.

<a href= "//" ></div>


var a = Document.getelementbytagname (' a ');

A.href//"", this URL is the result of resolve

A.getattribute (' href ')//'// ', exactly the same as in the HTML code


4. One-way sync relationship

Value is a very special attribute/property.

<input value = "cute"/>


var input = document.getelementbytagname (' input ');

If the property is not set, the result is attribute


Input.getattribute (' value '); Cute

Input.value = ' Hello ';

If the Value property has been set, then the attribute is unchanged, the properties change, the actual effect on the element is the attribute first


Input.getattribute (' value '); Cute


In addition, the display state of the checkbox is determined by the checked and indeterminate two properties, and there is only one property named checked, in which case the property is a more sophisticated access model.

Third, special scenes


With mutation observer, only attribute changes can be monitored.

var observer = new Mutationobserver (function (mutations) {

for (var i = 0; i < mutations.length; i++) {

var mutation = Mutations[i];

Console.log (Mutation.attributename);



Observer.observe (Element,{attributes:true});

ELEMENT.PROP1 = ' AA '//Will not trigger

Element.setattribute (' attr1 ', ' AA ')//Will trigger

2.custom element

When using webcomponents, you can define attribute and property, which can reflect each other or be completely unrelated.

var Myelementproto = object.create (Htmlelement.prototype, {

Createdcallback: {

Value:function () {}



Define Property

Object.defineproperty (Myelementproto, ' Prop1 ', {

Get:function () {



Set:function () {

Console.log ("Change of Property");//do something



Define Attribute

Myelementproto.attributechangedcallback = function (attr, oldval, newval) {

if (attr = = = ' Attr1 ') {

Console.log (' attribute change ');//do something



Window. MyElement = document.registerelement (' my-element ', {



Attribute and property in HTML

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.