| ||||||
| ||||||
|
Changing Table, Div and Span Border Styles with JavaScript getElementById()
I have previously discussed how to change the content of span or div tags by using getElementById and innerHTML. As you might be aware, getElementById() can do far more than just change content. Indeed it can access and manipulate a tag's style components. This tutorial will specifically focus on how you can manipulate borders by using JavaScript. Here is the first part of our getElementByID() code, and how it can be used to access a tags style components: document.getElementById('id1').style This will then be followed by the side of the border that we want to manipulate. All Round Border: document.getElementById('id1').style.border Top Border: document.getElementById('id1').style.borderTop Bottom Border: document.getElementById('id1').style.borderBottom Left Border: document.getElementById('id1').style.borderLeft Right Border: document.getElementById('id1').style.borderRight Border Properties And here are the various setting that we can give to the borders, including width, colour and line: "10px #FF0000 solid"; Border changing example Having read all the above you should be ready to understand the following example: <html> <head> <title>Changing the border properties of a div</title> <script language="javascript" type="text/javascript"> function changeBorder(colour, where) { var element = document.getElementById('id1').style; if(where == 'all') { element.border = "10px solid " + colour; } if(where == 'left') { element.borderLeft = "10px " + colour + " solid"; } if(where == 'right') { element.borderRight = "10px " + colour + " solid"; } if(where == 'bottom') { element.borderBottom = "10px " + colour + " solid"; } if(where == 'top') { element.borderTop = "10px " + colour + " solid"; } } </script> </head> <body> <div style="width:400px;" id="id1">Click on the buttons below to choose this DIV's border color!</div> <br> <b>All Round Border</b><br> <br> <input style="padding-right:5px;" type="button" onclick="changeBorder('#FF0000', 'all');" value="Red"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#FF6622', 'all');" value="Orange"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#AAA', 'all');" value="Grey"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#000', 'all');" value="Black"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#fff', 'all');" value="White"> <br><br> <b>Left Border</b><br> <br> <input style="padding-right:5px;" type="button" onclick="changeBorder('#FF0000', 'left');" value="Red"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#FF6622', 'left');" value="Orange"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#AAA', 'left');" value="Grey"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#000', 'left');" value="Black"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#fff', 'left');" value="White"> <br><br> <b>Right Border</b><br> <br> <input style="padding-right:5px;" type="button" onclick="changeBorder('#FF0000', 'right');" value="Red"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#FF6622', 'right');" value="Orange"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#AAA', 'right');" value="Grey"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#000', 'right');" value="Black"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#fff', 'right');" value="White"> <br><br> <b>Top Border</b><br> <br> <input style="padding-right:5px;" type="button" onclick="changeBorder('#FF0000', 'top');" value="Red"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#FF6622', 'top');" value="Orange"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#AAA', 'top');" value="Grey"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#000', 'top');" value="Black"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#fff', 'top');" value="White"> <br><br> <b>Bottom Border</b><br> <br> <input style="padding-right:5px;" type="button" onclick="changeBorder('#FF0000', 'bottom');" value="Red"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#FF6622', 'bottom');" value="Orange"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#AAA', 'bottom');" value="Grey"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#000', 'bottom');" value="Black"> <input style="padding-right:5px;" type="button" onclick="changeBorder('#fff', 'bottom');" value="White"> </body> </html>
|
