talksr Posted December 10, 2007 Share Posted December 10, 2007 I have been using the style property of an element to to change style properties for an element. I want to add another button and the corresponding Javascript to change the background colour for para2 (which is my second pharagraph). How can I do this? <html> <head> <style type="text/css"> #para2, #para3 { backgroundcolor: red; } </style> <script type="text/javascript"> function show_para1_status_win() { var oPara1=document.getElementById("para1"); window.status=oPara1.innerText; } function clear_status_win() { window.status=""; } </script> <title>Using the dom</title> </head> <body> <h1>Using the DOM</h1> <p id="para1">paragraph one text here</p> <p id="para2">paragraph two text here</p> <p id="para3">paragraph three text here</p> <hr /> <input type="button" name="Button" onClick="show_para1_status_win()" value="Show para1" /> <input type="button" name="Button" onClick="clear_status_win()" value="Clear status" /> <hr /> </body> </html> Link to comment https://forums.phpfreaks.com/topic/81049-style-properties-of-elements/ Share on other sites More sharing options...
phpQuestioner Posted December 10, 2007 Share Posted December 10, 2007 <html> <head> <style type="text/css"> #para2, #para3 { backgroundcolor:red; } </style> <script type="text/javascript"> function show_para1_status_win() { var oPara1=document.getElementById("para1"); window.status=oPara1.innerHTML; } function clear_status_win() { window.status=""; } function changeBG(pick,mycolor) { document.getElementById(pick).style.background = mycolor; } </script> <title>Using the dom</title> </head> <body> <h1>Using the DOM</h1> <p id="para1">paragraph one text here</p> <p id="para2">paragraph two text here</p> <p id="para3">paragraph three text here</p> <hr /> <input type="button" name="Button" onClick="show_para1_status_win()" value="Show para1" /> <input type="button" name="Button" onClick="clear_status_win()" value="Clear status" /> <input type="button" onclick="changeBG('para2','red')" value="Change Background"> <hr /> </body> </html> Link to comment https://forums.phpfreaks.com/topic/81049-style-properties-of-elements/#findComment-411220 Share on other sites More sharing options...
talksr Posted December 10, 2007 Author Share Posted December 10, 2007 Thanks phpQuestioner, it works very well. Could you explain to me how the code is getting that colour to display? There seem to be a few functions. Link to comment https://forums.phpfreaks.com/topic/81049-style-properties-of-elements/#findComment-411222 Share on other sites More sharing options...
phpQuestioner Posted December 10, 2007 Share Posted December 10, 2007 this is the function for the background color change: changeBG(pick,mycolor) it has two parameters: "pick" and "mycolor" the "pick" parameter would be your elements id - example <p id="para2"> the "mycolor" parameter would be your elements background color. so in the example I provided you; your elements id was "para2" and the background color for "para2"; I set it to red. changeBG('para2','red') Link to comment https://forums.phpfreaks.com/topic/81049-style-properties-of-elements/#findComment-411379 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.