Color Sampler : Color « Development « JavaScript DHTML






  1. JavaScript DHTML
  2. Development
  3. Color

Color Sampler


<HTML>
<HEAD>
<TITLE>Color Me</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var newWindow = window.open("","","height=150,width=300")

function defaultColors() {
    return "BGCOLOR='#c0c0c0' VLINK='#551a8b' LINK='#0000ff'"
}
function uglyColors() {
    return "BGCOLOR='yellow' VLINK='green' LINK='red'"
}
function showColorValues() {
    var result = ""
    result += "bgColor: " + newWindow.document.bgColor + "\n"
    result += "vlinkColor: " + newWindow.document.vlinkColor + "\n"
    result += "linkColor: " + newWindow.document.linkColor + "\n"
    document.forms[0].results.value = result
}

function drawPage(colorStyle) {
    var thePage = ""
    thePage += "<HTML><HEAD><TITLE>Color Sampler</TITLE></HEAD><BODY "
    if (colorStyle == "default") {
        thePage += defaultColors()
    } else {
        thePage += uglyColors()
    }
    thePage += ">Just so you can see the variety of items and color, <A "
    thePage += "HREF='http://www.java2s.com'>here\'s a link</A>"
    newWindow.document.write(thePage)
    newWindow.document.close()
    showColorValues()
}
function setColors(colorStyle) {
    if (colorStyle == "default") {
        document.bgColor = "#c0c0c0"
    } else {
        document.bgColor = "yellow"
    }
}

</SCRIPT>
</HEAD>
<BODY>
Try the two color schemes on the document in the small window. 
<FORM>
<INPUT TYPE="button" NAME="default" VALUE='Default Colors' onClick="drawPage('default')">
<INPUT TYPE="button" NAME="weird" VALUE="Ugly Colors" onClick="drawPage('ugly')"><P>
<TEXTAREA NAME="results" ROWS=3 COLS=20></TEXTAREA><P><HR>
These buttons change the current document, but not correctly on all platforms<P>
<INPUT TYPE="button" NAME="default" VALUE='Default Colors' onClick="setColors('default')">
<INPUT TYPE="button" NAME="weird" VALUE="Ugly Colors" onClick="setColors('ugly')"><P>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
drawPage("default")
</SCRIPT>
</BODY>
</HTML>








Related examples in the same category

1. Using Colors in JavaScript
2.Code for the Actual JavaScript Code and Color Selectors
3.Using Color Attributes: how document colors can be changed
4.Using setInterval () to Repeatedly Change the Document Background Color