How javascript modifies element attributes

This article will explain in detail how javascript modifies element attributes. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Js methods to modify element attributes: 1, use "element object .setAttribute ('attribute', 'attribute value')" statement; 2, use "element object .style.cssText = 'attribute name: attribute value;'" statement.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

Javascript modifies the attributes of an element

Method 1: use setAttribute ()

The setAttribute () method adds the specified property and assigns it the specified value. If this specified property already exists, only the value is set / changed.

Syntax: element object .setAttribute ('attribute', 'attribute value')

Example:

Welcome to hello! Var box=document.getElementById ("box"); box.setAttribute ('style','color:red;border:1px solid # 008000'); / / inline style is set for the box element

Method 2: modify directly through the style object of the element node

Syntax: element object. Style. Attribute name = 'attribute value'

Example:

Welcome to hello! Var box=document.getElementById ("box"); box.style.color='#fff'; box.style.backgroundColor='#ff6c8c'; box.style.padding='10px'

Method 3: use the cssText attribute

Syntax: element object .style.cssText = 'attribute name: attribute value;'

Example:

Welcome to hello! Var box=document.getElementById ("box"); box.style.cssText='color:#fff;background-color:#ffaa00;padding:10px;'; on "how to modify element attributes" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.