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
<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
<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
<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
<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
<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
<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
<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
<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
<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>
TrueCodes 
Leave a comment