Difference between revisions of "DOM Changing elements"
Jump to navigation
Jump to search
| Line 22: | Line 22: | ||
</div> | </div> | ||
</div> | </div> | ||
== | ==Change an element based on id== | ||
<div class='qu'> | <div class='qu'> | ||
If the element you want to change has an id you can use '''getElementById''' | |||
*The html above has a div with di "countries" | |||
<div class=imper>Change the countries div to have silver background color. | |||
<pre class='usr'> | <pre class='usr'> | ||
let e = document.getElementById('countries'); | let e = document.getElementById('countries'); | ||
Revision as of 16:02, 7 September 2021
<div id='countries'> <div id='fr'> <div>France</div> <img src='/flags/fr.gif'/> </div> <div id='fi'> <div>Finland</div> <img src='/flags/fi.gif'/> </div> </div>
In these examples the web page contains the following content.
<div id='countries'> <div id='fr'> <div>France</div> <img src='/flags/fr.gif'/> </div> <div id='fi'> <div>Finland</div> <img src='/flags/fi.gif'/> </div> </div>
Change an element based on id
If the element you want to change has an id you can use getElementById
- The html above has a div with di "countries"
Change the countries div to have silver background color.
let e = document.getElementById('countries');
e.style.backgroundColor = 'pink';
let e = document.getElementById('countries');
e.style.backgroundColor = 'silver';
Find an element and change it
document.querySelector('img').style.width = '75px';
document.querySelector('img').style.width = '50px';