| Main Site Topics Ken Ward's JavaScript Tutorial 1 |
The buttons below can be used to change the properties of the
scrollbars on this page. For instance, clicking on the first button, using the default
colour, changes the scrollbar's face-color to red. You can determine what face-color is by
noting what changes colour when you click the button:-) Some buttons appear not to work
in some browsers. The code works best with IE.
The first button has the code:
< input type="button" value="face-color" onClick="changeStyle('t1')">
So when the button is clicked, the function, changeStyle is called, with the
parameter 't1'. This parameter, 't1', refers to the text box with a colour name or hex
code. In the default case, this is 'red'.
The function changeStyle is shown in full below:
function changeStyle(idText) {
//first the appropriate colour is found
var
myColor=document.getElementById(idText).value;
//next, the code checks which text box id was passed
//and from this, which property it should change
(idText== 't1')?document.body.style.scrollbarFaceColor=myColor:'';
//in the first case, the text box has an id of "t1", so
scrollbar-face-color
// is changed
(idText== 't2')?document.body.style.scrollbarArrowColor=myColor:'';
(idText== 't3')?document.body.style.scrollbarTrackColor=myColor:'';
(idText== 't4')?document.body.style.scrollbarShadowColor=myColor:'';
(idText== 't5')?document.body.style.scrollbarHighlightColor=myColor:'';
(idText== 't6')?document.body.style.scrollbar3dlightColor=myColor:'';
(idText== 't7')?document.body.style.scrollbarDarkshadowColor=myColor:'';
} //end of changeStyle(idText);
//-->
This was was written, actually, to illustrate what these properties are dynamically.
You might also find this page on scrollbars
of use. |
Java Script
Tutorial TOC |
