В данном примере 3 кнопки – возврат к исходному контенту тега div, замена контента и замена атрибутов элемента HTML (меняется цвет элемента HTML)
main.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>some examples with DOM</title> </head> <body> <button id="initialsettings">initialsettings</button> <button id="changecontent">changecontent</button> <button id="changeattributes">changeattributes</button> <!--ссылку на скрипт надо ставить после кнопки --> <script src="somescript.js"></script> <div id="divid"> </div> </body> </html> |
somescript.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/** * @author Panteleev Stas */ function initialsettings1(){ document.getElementById('divid').innerHTML='Some content in div'; } function changecontent(){ document.getElementById('divid').innerHTML=prompt('Enter new content',''); } function changeattributes(){ document.getElementById('divid').setAttribute("style","color:red"); } document.getElementById('initialsettings').onclick=function(){ initialsettings1();}; document.getElementById('changecontent').onclick=function(){ changecontent();}; document.getElementById('changeattributes').onclick=function(){ changeattributes();}; |