OneStopTesting.com - Testing EBooks, Tutorials, Articles, Jobs, Training Institutes etc.
OneStopGate.com - Gate EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
OneStopMBA.com - MBA EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
OneStopIAS.com - IAS EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
OneStopSAP.com - SAP EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
OneStopGRE.com - of GRE EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
How to: Change color and style of Scrollbar through JavaScript | Articles | Recent Articles | News Article | Interesting Articles | Technology Articles | Articles On Education | Articles On Corporate | Company Articles | College Articles | Articles on Recession
Home » Articles » How to: Change color and style of Scrollbar through JavaScript
How to: Change color and style of Scrollbar through JavaScript
Article Posted On Date : Saturday, March 24, 2012
How to: Change color and style of Scrollbar through JavaScript
Advertisements
How to change the color and position of the scrollbar? Some newer browsers version allow you to change the scrollbar by color and position. Most of this is supported by the IE browser only. These are the following types of changing color of different position of the scrollbar. Normal Face Shadow Highlight 3dlight Darkshadow Track Arrow You can use any color and position according to your site design. For example: If you want to change Face color of scrollbar then write the code something as: obj.scrollbarFaceColor = htmlStyle.scrollbarFaceColor ='#f00000'; Example: <html> <head > <title>Scrollbar coloring</title> </head> <body bgcolor="#ccccff"> <script type="text/javascript"> window.onload = function() { var htmlStyle = document.getElementsByTagName('html')[0].style; var x = document.body.style; x.scrollbarShadowColor = htmlStyle.scrollbarShadowColor = '#f00000'; //x.scrollbarFaceColor = htmlStyle.scrollbarFaceColor ='#f00000'; //x.scrollbarArrowColor = htmlStyle.scrollbarArrowColor = '#f00000'; //x.scrollbarTrackColor = htmlStyle.scrollbarTrackColor = '#ff00ff'; //x.scrollbarHighlightColor = htmlStyle.scrollbarHighlightColor = '#f00000'; //x.scrollbar3dlightColor = htmlStyle.scrollbar3dlightColor = '#ff00ff'; //x.scrollbarDarkshadowColor = htmlStyle.scrollbarDarkshadowColor = '#ff00ff'; } </script> <form id="form1" runat="server" > <font color="fuchsia"><h2>This is Shadow color Scrollbar</h2></font> <font color="red"><b>There are different position of Scrollbar</b></font> <br /><br /> <font color="navy"> Normal<br /> Face<br /> Shadow<br /> Highlight<br /> 3dlight<br /> Darkshadow<br /> Track<br /> Arrow<br /></font> </form> </body> </html>
Amazon.in Widgets