Advertisement
Google Ad Slot: content-top
JS Change Attribute Dom
Attributes in HTML elements can be added, updated, or removed dynamically using JavaScript. The setAttribute, getAttribute, hasAttribute, and removeAttribute methods, as well as property access, are commonly used to manipulate attributes.
setAttribute:
Adds or updates an attribute on an element.
Example
<div id="example">Existing text</div>
<script>
const element = document.getElementById('example');
element.setAttribute('class', 'new-class'); // Sets or updates the 'class' attribute.
element.setAttribute('data-id', '123'); // Adds a custom data attribute.
console.log(element);
</script>
getAttribute:
Retrieves the value of an attribute.
Example
<div id="example" class="new-class">Existing text</div>
<script>
const element = document.getElementById('example');
const classValue = element.getAttribute('class'); // Retrieves the 'class' attribute value.
console.log(classValue); // Output: new-class
</script>
removeAttribute:
Removes an attribute from an element.
Example
<div id="example" class="new-class">Existing text</div>
<script>
const element = document.getElementById('example');
element.removeAttribute('class'); // Removes the 'class' attribute.
console.log(element.getAttribute('class')); // Output: null
</script>
hasAttribute:
Checks if an element has a specific attribute.
Example
<div id="example" class="new-class">Existing text</div>
<script>
const element = document.getElementById('example');
if (element.hasAttribute('class')) {
console.log('The element has a class attribute.');
} else {
console.log('No class attribute found.');
}
</script>
style:
Add styles in js
Example
<h1>style in js</h1>
<div id="example">Existing text</div>
<script>
const element = document.getElementById('example');
element.style.color = 'white';
element.style.backgroundColor = 'green';
</script>