HTML and CSS Reference
In-Depth Information
Plan
Ahead
Changing the color of the browser scroll bar.
The scroll bar color can be changed with a JavaScript user-defined function. To change the
scroll bar color, follow these guidelines:
JavaScript must have access to the object (the scroll bar). Use the getElementsByTagName()
•
method of the document object to assign the “HTML” object to a variable. The
getElementsByTagName() method returns an array of elements belonging to the identified
object and all associated properties to that object.
Using the variable as an object, JavaScript can set values to the various scroll bar
•
properties: FaceColor, ArrowColor, HighlightColor, 3DlightColor, DarkshadowColor,
TrackColor, and ShadowColor.
Assign a color that matches or complements the colors on the Web page to at least the
•
FaceColor and TrackColor.
Changing the Color of the Browser Scroll Bar
Currently, Cascading Style Sheets (CSS) do not have an official standard style for
changing colors of the browser scroll bar that is recognized by all browsers. To modify
the scroll bar, JavaScript needs to know the object so it can assign new style values. You
use the getElementsByTagName() method to obtain a list of any type of HTML element.
In this instance, the getElementsByTagName() method will identify the scroll bar object
and assign it to a variable, which can then be modified by JavaScript. Table 9-20 shows the
general form of the getElementsByTagName() method.
Color Values
For the most flexibility
in using colors, Web
developers suggest using
either the hexadecimal
version or the rgb()
method version to assign
a color. Be careful in
using a standard color
name. Color names like
“lightblueaqua” may not
be recognized by the style
property.
Table 9-20 getElementsByTagName() Method
General form:
document.getElementsByTagName('html')
Comments:
where
getElementsByTagName()
is a method of the document object and 'html' is the object
to be returned. The tag element must be entered as a string in single quotation marks and is
case sensitive. The 'html' tag is used to access the entire Web page document, which allows
modification through the styleObject variable using CSS selectors. The returning values are
returned in an array format, so that each element can be referenced individually by an array
value. The returned value can also use any properties associated with that value. The example
shows the method to create an object of the html tag styles named styleObject.
Example:
styleObject=document.getElementsByTagName('html')[0].style
CSS and Scroll Bars
Only Internet Explorer
will modify the scroll
bar properties using
JavaScript and the
getElementsByTag()
method associated with
the <html> tag. All other
browsers will ignore this
set of code and not modify
the scroll bar.
To modify the colors of the Web page scroll bar, use the styleObject object
name with the standard scroll bar properties: FaceColor, ArrowColor, HighlightColor,
3DlightColor, DarkshadowColor, TrackColor, and ShadowColor. For example, to change
the FaceColor of the scroll bar write
styleObject.scrollbarFaceColor=“#ffde5b”
where the color must be written as a standard color name, a hexadecimal value, or defined
by using the rgb() values method.
On the Midwest Bridal Expo Web page, the scroll bar colors are changed so the
scroll bar is orange and the scroll bar track is yellow.
To Enter the User-Defined Function to Change the Browser Scroll Bar Color
Table 9-21 shows the code to change the scroll bar colors. Line 26 defines the function as scrollColor(). Line 27
defines the style property of the <html> tag and assigns it to an object, so face color and track color can be changed in
lines 28 and 29. Line 28 changes the color of the scroll bar face to orange using a hexadecimal value. Line 29 changes
the scroll bar track color to yellow using a hexadecimal value. Line 30 closes the scrollColor() function.
