Dynamic web pages using JavaScript Document object and Document Object Model
Manipulating HTML elements
It is not only possible to access HTML elements, but also possible to
change them on-the-fly
<! D OCT YPE html >
< html lang = " en - GB ">< head > < title > Man ipul a ting HTML elements </ title >
<style >
td . RedBG { b ack grou nd : # f00 ; }
</ style >
<script >
fu nction ch a ngeBa ckgro u nd1 (id ) {
do cument . getE l emen tByI d ( id ). style . back gro u nd = "#00 f";
do cument . getE l emen tByI d ( id ). in nerH TML = " blue " ;
}
fu nction ch a ngeBa ckgro u nd2 (id ) {
do cument . getE l emen tByI d ( id ). cl assN ame = " RedBG " ;
do cument . getE l emen tByI d ( id ). in nerH TML = " red ";
}
</ script > </ head > < body >
< table border ="1 " ><tr >
<td id =" 0 " onclic k =" c h angeB ackgr o und1 ( ' 0 ' ); " >white </ td >
<td id =" 1 " onclic k =" c h angeB ackgr o und2 ( ' 1 ' ); " >white </ td >
</tr ></ table > </ body > </ html >
https://cgi.csc.liv.ac.uk/
~
ullrich/COMP284/examples/jsBG.html
COMP284 Scripting Languages Lecture 13 Slide L13 – 22