Working with Attributes
Understanding how to work with attributes is essential for dynamic and interactive web pages. Many elements in HTML have attributes, such as src for images, href for links, and alt for alternative text. JavaScript gives you several ways to read and change these attributes. The two most common methods are getAttribute and setAttribute.
These methods let you access or modify any attribute by name, regardless of whether it is a standard property:
- Use
element.getAttribute("src")to read thesrcof an image; - Use
element.setAttribute("alt", "A new description")to update itsalttext.
In addition to these methods, some attributes can also be accessed directly as properties—such as element.src or element.href. Direct property access is often more convenient but may behave differently for some attributes, especially when dealing with custom or non-standard attributes.
index.html
script.js
In this example, you see both techniques: setAttribute is used to update the src and alt attributes of the image, while the link's href is changed using direct property access. Both approaches achieve similar results for standard attributes, but using the appropriate method is important for consistency and compatibility.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain the difference between getAttribute/setAttribute and direct property access in more detail?
When should I use setAttribute instead of direct property access?
Are there any attributes that can only be accessed or changed with setAttribute?
Awesome!
Completion rate improved to 6.67Working with Attributes
Pyyhkäise näyttääksesi valikon
Understanding how to work with attributes is essential for dynamic and interactive web pages. Many elements in HTML have attributes, such as src for images, href for links, and alt for alternative text. JavaScript gives you several ways to read and change these attributes. The two most common methods are getAttribute and setAttribute.
These methods let you access or modify any attribute by name, regardless of whether it is a standard property:
- Use
element.getAttribute("src")to read thesrcof an image; - Use
element.setAttribute("alt", "A new description")to update itsalttext.
In addition to these methods, some attributes can also be accessed directly as properties—such as element.src or element.href. Direct property access is often more convenient but may behave differently for some attributes, especially when dealing with custom or non-standard attributes.
index.html
script.js
In this example, you see both techniques: setAttribute is used to update the src and alt attributes of the image, while the link's href is changed using direct property access. Both approaches achieve similar results for standard attributes, but using the appropriate method is important for consistency and compatibility.
Kiitos palautteestasi!
