Skip to content
Advertisements

DOM Attribute

As we create HTML elements in JavaScript, we can create and delete their attributes. For this, we use the setAttribute () method to create the attribute, the removeAttribute () method to delete the attribute, the getAttribute () method to find the attribute value, and the hasAttribute () method to check the attribute.


setAttribute()

Sets an attribute value on the specified element. If the property already exists, the value is updated; otherwise, a new attribute is added with the specified name and value.
To get the current value of an attribute, use getAttribute (); to remove an attribute, call removeAttribute ().

Note: Although it is possible to add a style attribute to an item with this method, it is recommended that you use the properties of the Style object instead for the inline style, because it does not overwrite the other CSS properties specified in it.

Syntax:

element.setAttribute(name , value)

  • name: A new feature that you want to add.
  • value: The value of the new property that you want to add.

setAttribute Examples

Example 1

setAttribute example
<body>

    <div id="txt">TRUECODES.ORG</div>
   
    <script>
        let = document.getElementById("txt");
        txt.setAttribute("style", "background-color: #9e3d05; color: #ccc; font-family: verdana ");
    </script>

</body>

Example 2

setAttribute example
<body>

    <input type="text" value="truecodes.org"/>
    <button onclick="myAttribute();">TRANSLATE</button>
   
    <script>
        
        function myAttribute() {
            document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");
        }

    </script>

</body>

getAttribute()

The JavaScript getAttribute () property returns the value of a named attribute. Note that the HTMLElement object defines the JavaScript properties that match each of the standard HTML attributes; therefore, if you only query the value of non-standard attributes, you must use this method with HTML documents.

Syntax:

element.getAttribute(name)

name: Enter the name of the attribute to which you want to retrieve the value.


getAttribute Examples

Example 1

getAttribute Example
<body>

    <input type="text" value="truecodes.org"/>
    <button onclick="myAttribute();">TRANSLATE</button>
    <div id="result"></div>
   
    <script>
        
        function myAttribute() {
            document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");

            let type = document.getElementsByTagName("INPUT")[0].getAttribute("type");
            document.getElementById("result").innerHTML = type;
        }

    </script>

</body>

Example 2

getAttribute Example
<body>

    
    <button id="but" onclick="myButton()">BUTTON</button><br />
    <div id="result"></div>

    <script>

        function myButton() {
            let info = document.getElementById("but").getAttribute("onclick");
            document.getElementById("result").innerHTML = info;
        }

    </script>

</body>

Example 3

getAttribute Example
<body>

    <button id="but" onclick="myButton()">BUTTON</button><br />
    <p onmousedown="onmousedownFunction()"></p>
    <div id="result"></div>

    <script>

        function myButton() {
            let info = document.getElementsByTagName("P")[0].getAttribute("onmousedown");
            document.getElementById("result").innerHTML = info;
        }

    </script>

</body>

removeAttribute()

removeAttribute () removes an attribute from the specified item.
An exception does not occur when you try to remove an attribute that is not on the element.

Syntax:

element.removeAttribute(name)

name: Enter the name of the feature you want to remove.


removeAttribute Examples

Example 1

removeAttribute example
<body>

    <input class="txt" type="text" value="truecodes.org"/>
    <button onclick="myAttribute();">REMOVE</button>
   
    <script>
        
        function myAttribute() {
            document.getElementsByTagName("INPUT")[0].removeAttribute("class")
        }

    </script>

</body>

Example 2

removeAttribute example
<body>

    <div class="box">
        <input class="txt" type="text" value="box list" />
        <span onclick="removeFunction()"><i class="fas fa-times"></i></span>
    </div>


    <script>

        function removeFunction() {
            document.querySelector(".box").removeAttribute("class");
        }

    </script>

</body>

hasAttribute

The hasAttribute () method returns true if the specified attribute exists, otherwise false.

Syntax:

element.hasAttribute(name)

name: The attribute name that you want to check if it exists.


hasAttribute Examples

Example 1

hasAttribute Example
<body>

    <div class="box">
        <input class="txt" type="text" value="box list" />
        <span onclick="removeFunction()"><i class="fas fa-times"></i></span>
    </div>


    <script>

        function removeFunction() {
            let bloen = document.querySelector(".box").hasAttribute("class");
            if (bloen === true) {
                document.querySelector(".box").removeAttribute("class");
            }
            else {
                document.querySelector(".box").setAttribute("class");
            }
        }

    </script>

</body>

Example 2

hasAttribute Example
<body>

<p>Click the button to find out if the button element has an onclick attribute.</p>

<button id="myBtn" onclick="myFunction()">Try it</button>

<p>Internet Explorer 8 and earlier does not support the hasAttribute() method.</p>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("myBtn").hasAttribute("onclick");
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: