Manipulating styles through DOM scripting. Last year, we saw three approaches to style specification Accessing an external stylesheet –Using the link

Manipulating stylesthrough DOM scripting

Last year, we saw three approaches to style specification

• Accessing an external stylesheet– Using the link element

• Specifying an in-head stylesheet– Using the <style> element

• Specifying style inline– Using the style attribute

We also saw some simple JavaScript-based style manipulation

• We saw that inline event handlers like

<p onmouseover = “highlight(this);”

onmouseout = “restore(this);” >

This is a paragraph. </p>

could invoke JavaScript functions to manipulate the style of HTML elementsfunction highlight(someElement)

{ someElement.style.color=“red”; }

function highlight(someElement)

{ someElement.style.color=“red”; }

DOM Level 2 Style Specification

• In DOM Level 2 Stylehttp://www.w3.org/TR/DOM-Level-2-Style/

the W3C specified a much richer form of style manipulation

http://www.w3.org/TR/DOM-Level-2-Style/

DOM Level 2 Style has two main parts

• DOM Level 2 Stylehttp://www.w3.org/TR/DOM-Level-2-Style/

has two main parts• DOM Style Sheets, which provides generic

features for manipulating arbitrary stylesheets http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html

• DOM CSS, which provides specific features for manipulating CSS stylesheets

http://www.w3.org/TR/DOM-Level-2-Style/css.html

http://www.w3.org/TR/DOM-Level-2-Style/

http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html

http://www.w3.org/TR/DOM-Level-2-Style/css.html

State of browser support• Currently (2007):

– Both DOM Style Sheets and DOM CSS are implemented by the Mozilla Firefox and Opera browsers

– But Microsoft Internet Explorer• Does not implement DOM Style Sheets• Although it does seem to implement most

(but not all) of DOM CSS

• Thus, we will just look at DOM CSS

Some basic features of DOM CSS• While the DOM CSS provides many other

features– the most widely-used aspects are similar to

those features we encountered last year when seeing how to control CSS with JavaScript:

• If someElement is a DOM object which represents a XHTML element,

we can control the element’s presentation by manipulating someElement.style

• Any CSS <property> can be controlled by manipulating someElement.style.<property>

For example, someElement.style.color=“green”;

• This is supported by all the main browsers

DOM CSS example 1No style in XHTML page; all style applied in JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x

html1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>DOM CSS Example 1</title><script src="script1.js"

type="text/javascript"></script></head><body><h1>Heading 1</h1><h1>Heading 2</h1><h1>Heading 3</h1><h1>Heading 4</h1></body></html>

function applyStyle() { var headers =

document.getElementsByTagName("h1"); for (var i=0; i < headers.length; ++i) { headers[i].style.color='green'; } }

if (window.attachEvent) { window.attachEvent("onload", applyStyle); }else if (window.addEventListener) {window.addEventListener("load", applyStyle,false); }

Viewing this page in MS Internet Explorerhttp://www.cs.ucc.ie/j.bowen/cs4408/resources/DOMStyle/DOMCSS/ex1/index.html

Viewing this page in Mozilla Firefoxhttp://www.cs.ucc.ie/j.bowen/cs4408/resources/DOMStyle/DOMCSS/ex1/index.html

Viewing this page in Opera 9.1http://www.cs.ucc.ie/j.bowen/cs4408/resources/DOMStyle/DOMCSS/ex1/index.html

Of course, you can use DOM scripting to change the stylesheet attached to an XHTML page


html1/DTD/xhtml1-strict.dtd"><html

xmlns="http://www.w3.org/1999/xhtml">

<head><title>DOM CSS Exampe 2</title><script src="script1.js"

type="text/javascript"></script><link rel="stylesheet" href="style1.css"

type="text/css" /></head><body><h1>First Header</h1><h1>Second Header</h1><h1>Third Header</h1></body></html>

• This XHTML page has a link element which attaches the stylesheet in file style1.css, which contains just one rule:h1 {color:red}

• But, when the page is loaded, the program in file script1.js will alter the href in the link element, making it point to file style2.css which contains:h1 { color : green }

When the page is loaded, the headers are painted red and an alert box is displayed

http://www.cs.ucc.ie/j.bowen/cs4408/resources/DOMStyle/DOMCSS/ex2/index.html

When the user clicks OK, a different stylesheet file is used to display the XHTML page

http://www.cs.ucc.ie/j.bowen/cs4408/resources/DOMStyle/DOMCSS/ex2/index.html

The JavaScript file which produced this behaviour function changeStyleSheet() { alert('When you click OK, the \n stylesheet will be changed. \n\n Watch the colours change \n from red to green \n '); document. getElementsByTagName("link")[0]. setAttribute("href","style2.css"); }

if (window.attachEvent) { window.attachEvent("onload", changeStyleSheet); } else if (window.addEventListener) {window.addEventListener("load", changeStyleSheet,false); }

• This cross-browser JavaScript file attaches the function changeStyleSheet to process a load event on the window

• The function makes the link element in the XHTML file point to a different CSS file

Adaptive forms

By using JavaScript for event handling,

you can make forms which adapt themselves in response to user choices

• Using JavaScript there are two ways in which, you can make forms which adapt themselves in response to user choices– You can use style control to determine

whether or not particular parts of a form are displayed to a user

– You can use the DOM createElement method to actually create new parts of a form

Using style control to create adaptive forms

• For example, suppose you have a form on which the user is asked to give his address– The form will include a section for getting the user’s

country– It will also include a section for getting the user’s post-

code• But, initially, display of this section could be turned off,

because not all countries have post-codes

– But if the user specifies a country which is known to use post-codes, the post-code section could be displayed

• This example is implemented here: http://www.cs.ucc.ie/j.bowen/cs4408/resources/DOMStyle/DOMCSS/ex3/prop1.php

• It is discussed in the next few slides

http://www.cs.ucc.ie/j.bowen/cs4408/resources/DOMStyle/DOMCSS/ex3/prop1.php

Initial view

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>DOM CSS Exampe 3</title><script src="script1.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="style1.css" /></head><body>

<form method="post"

action="/j.bowen/cs4408/resources/DOMStyle/DOMCSS/ex3/prog1.php">

<h1>Where are you?</h1>

<fieldset> <legend>What country are you in?</legend> <select name="countryCode" id="country"> <option value="">Select country</option> <option value="fr">France</option> <option value="ie">Ireland</option> <option value="uk">United Kingdom</option> </select> </fieldset>

<fieldset id="codeField"> <legend>What is your post code?</legend> <input type=text name=postCode /> </fieldset>

<button type="submit">Submit</button> </form> </body></html>

• The browser displayes only one fieldset on this form

• But there are actually two fieldsets in the form– The form contains a

fieldset for getting the user’s post code but, initially, it is not displayed

– As will be seen later, display of the post-code fieldset is turned off in file script1.js

User has choice of countries, two of which (UK and France) use post-codes

User selects UK, causing display of the post code fieldset


html1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>DOM CSS Exampe 3</title>

<link rel="stylesheet" type="text/css" href="style1.css" />

</head><body>

<?php$countryCode=$_POST['countryCode'];if ($countryCode) { echo "<p>Your country code is: $countryCode</p>"; $postCode=$_POST['postCode']; if ($postCode) { echo "<p>Your post-code is: $postCode</p>"; } } else {?>

<script src="script1.js" type="text/javascript"></script>

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <h1>Where are you?</h1>


<fieldset id="codeField"> <legend>What is your post code?</legend> <input type=text name=postCode /> </fieldset>

<button type="submit">Submit</button> </form> <?php }?></body></html>

The PHP program • There is nothing special about

the PHP program which generates the form and which responds to a completed form– If a request which activates the

program contains data, it reports these data

– Otherwise, it generates a form to get the data

• Both pages generated by the program use a stylesheet style1.css

• Only the page containing the form invokes the JavaScript file script1.js

The stylesheet file

form {width:500px; background-color:yellow; border-width:1; border-style:solid; padding:3.0mm}

fieldset { margin: 3.0mm; padding:1.0mm }

p { color:red }

• There is nothing special about the stylesheet file

The JavaScript filefunction handleCountryChange(someEvent) { var country = document.getElementById("country"); if (country.value=="") { document.getElementById("codeField").style.display="none"; } else { if (country.value!="ie") { document.getElementById("codeField").style.display=""; } else { document.getElementById("codeField").style.display="none"; } } }

function setupForm(someEvent) { document.getElementById("codeField").style.display="none"; var country = document.getElementById("country"); if (window.attachEvent) { country.attachEvent("onchange",handleCountryChange); } else if (window.addEventListener) { country.addEventListener("change",handleCountryChange,false); } }

if (window.attachEvent) { window.attachEvent("onload", setupForm); }else if (window.addEventListener) { window.addEventListener("load", setupForm,false); }

• The JavaScript file contains two function definitions and one statement

• This statement uses a cross-browser approach to specify that a function called setupForm should be invoked when the page has been loaded

The JavaScript file (contd.)function handleCountryChange(someEvent) { var country = document.getElementById("country"); if (country.value=="") { document.getElementById("codeField").style.display="none"; } else { if (country.value!="ie") { document.getElementById("codeField").style.display=""; } else { document.getElementById("codeField").style.display="none"; } } }

function setupForm(someEvent) {document.getElementById("codeField"). style.display="none"; var country = document.getElementById("country"); if (window.attachEvent) { country.attachEvent("onchange", handleCountryChange); } else if (window.addEventListener) { country.addEventListener("change", handleCountryChange,false); } }


• The function setupForm acts as follows:– Sets the display of the

post-code fieldset, which has ID codeField, to none

– Uses a cross-browser approach to specify that, whenever the user selects a country, a function called handleCountryChange should be executed

The JavaScript file (contd.)function handleCountryChange(someEvent) { var country = document.getElementById("country"); if (country.value=="") { document.getElementById("codeField").style.display="none"; } else { if (country.value!="ie") { document.getElementById("codeField").style.display=""; } else

{ document.getElementById("codeField").style.display="none"; }

} }

function setupForm(someEvent) {document.getElementById("codeField"). style.display="none"; var country = document.getElementById("country"); if (window.attachEvent) { country.attachEvent("onchange", handleCountryChange); } else if (window.addEventListener) { country.addEventListener("change", handleCountryChange,false); } }


• The function handleCountryChange acts as follows:– Sets a local variable,

called country, to refer to the select element (which has ID country)

– Examines the value of the option chosen for the select element and

– Decides whether or not to set the display of the post-code fieldset to none

Using createElement for adaptive forms• Instead of using style control to show/hide elements of a

form which already exist– You could use the DOM createElement method to create

elements on the form in response to user choices

• Consider, again, the form on which the user is asked to give his address– The form will include a section for getting the user’s

country– Initially, it will not contain a section for getting the

user’s post-code– But if the user specifies a country which is known to

use post-codes, the post-code section could be created and displayed

• See an implementation here: http://www.cs.ucc.ie/j.bowen/cs4408/resources/DOMStyle/DOMCSS/ex4/prog1.php

• It is discussed on the next few slides

http://www.cs.ucc.ie/j.bowen/cs4408/resources/DOMStyle/DOMCSS/ex4/prog1.php

What’s different?

• If you run this new implementation, the user-interface looks the same as the previous implementation

• But appearances can be deceptive

• This implementation actually behaves very differently

• So, what is different?


html1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>DOM CSS Exampe 4</title><link rel="stylesheet" type="text/css" href="style1.css" /></head><body>

<?php$countryCode=$_POST['countryCode'];if ($countryCode) { echo "<p>Your country code is: $countryCode</p>"; $postCode=$_POST['postCode']; if ($postCode) { echo "<p>Your post-code is: $postCode</p>"; } } else {?>

<script src="script1.js" type="text/javascript"></script>

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <h1>Where are you?</h1>


<button type="submit">Submit</button> </form> <?php }?></body></html>

The PHP program is different

• When it generates the form page, it does not generate a fieldset for the post-code– See the program code

on the left-hand side of this slide

• The post-code fieldset will generated, when necessary, by the JavaScript in script1.js

The JavaScript file, script1.jsfunction handleCountryChange(someEvent) { …..}

function setupForm(someEvent) { var country =

document.getElementById("country"); if (window.attachEvent) { country.attachEvent("onchange", handleCountryChange); } else if (window.addEventListener) { country.addEventListener("change",

handleCountryChange,false); } }

if (window.attachEvent)

{ window.attachEvent("onload",setupForm); }

else if (window.addEventListener)

{ window.addEventListener("load",setupForm,false); }

• As before, the JavaScript file contains two function definitions and one statement

• The statement is the same as before

• The function setupForm is the same as before

• The only difference (and it is very significant) is in the function handleCountryChange

Before we examine handleCountryChange

• Before we examine handleCountryChange, – We need to notice something important about

the behaviour of the form page• Look at the next few slides

The initial view

• The user has not selected any country

• There is no fieldset for the post-code

The user makes an initial selection

• The user has selected the United Kingdom as his country

• A fieldset for the post-code has been created

The user changes his mind

• The user changes his mind

• He selects Ireland• The fieldset for the

post-code has been removed

The user changes his mind again

• The user changes his mind again

• He selects France• A fieldset for the post-

code has been created

Therefore …

• Thus, we notice that the function handleCountryChange must both create and remove a fieldset

• The safest thing to do is as follows:– When it executes, the function should ensure

the form is in a known state• By removing any fieldset it may have created on a

previous execution (if any)

– Then, the function can decide whether or not to create a new fieldset

handleCountryChange

function handleCountryChange(someEvent) { var form = document. getElementsByTagName("form")[0]; //Maybe the user has just changed his mind about the country. //If so, remove any postCodeField element that had been created //when he made his previous choice.

possibleExistingPostCodeField= document.getElementById("postCodeField"); if (possibleExistingPostCodeField) {form. removeChild(possibleExistingPostCodeField); }

//Now, react to the new value for country var country = document.getElementById("country"); if (country.value!="") { if (country.value!="ie") { //Create new fieldset element newField = document.createElement("fieldset"); newField.setAttribute("id","postCodeField");

//Insert the new fieldset just before the button var button = form.getElementsByTagName("button")[0]; form.insertBefore(newField,button);

//Now add a legend to the new fieldset newLegend = document.createElement("legend"); newField.appendChild(newLegend); newLegendText = document.createTextNode("What is your post code?"); newLegend.appendChild(newLegendText);

//Now insert an input box into the new fieldset newInput = document.createElement("input"); newField.appendChild(newInput); newInput.setAttribute("type","text"); newInput.setAttribute("name","postCode"); } }

}

• The function handleCountryChange first makes a local variable, called form, point to the form on the page– (it is the first, and only,

form in the array of forms on the page)

• Then it tries to make a local variable called possibleExistingPostCodeField refer to an element with the ID postCodeField

• Then, if such an element exists, it removes the element from the form

handleCountryChange (contd.)function handleCountryChange(someEvent) { var form = document. getElementsByTagName("form")[0]; //Maybe the user has just changed his mind about the country. //If so, remove any postCodeField element that had been created //when he made his previous choice. possibleExistingPostCodeField= document.getElementById("postCodeField"); if (possibleExistingPostCodeField) {form. removeChild(possibleExistingPostCodeField); }

//Now, react to the new value for country var country = document.getElementById("country"); if ( country.value!="“ ) { if ( country.value!="ie“ ) { //Create new fieldset element newField = document.createElement("fieldset"); newField.setAttribute("id","postCodeField");



//Now insert an input box into the new fieldset newInput = document.createElement("input"); newField.appendChild(newInput); newInput.setAttribute("type","text"); newInput.setAttribute("name","postCode");

} } }

• Having ensured that the form does not contain a post-code fieldset, the function now decides whether one should be created

• It makes a local variable, called country, refer to the select element on the form – which has the ID country

• The function will create a post-code fieldset only if– The value of the option

chosen for the select element is not the empty string and

– is not the string “ie”


//Now, react to the new value for country var country = document.getElementById("country"); if ( country.value!="“ ) { if ( country.value!="ie“ ) {

//Create new fieldset element newField = document.createElement("fieldset"); newField.setAttribute("id","postCodeField");



//Now insert an input box into the new fieldset newInput = document.createElement("input"); newField.appendChild(newInput); newInput.setAttribute("type","text"); newInput.setAttribute("name","postCode"); } } }

• If it has decided that a post-code fieldset should be created, the function– creates a new fieldset

element and makes a local variable called newField refer to it

– gives the ID postCodeField to this new element

– Then … (see next slide)






• Then …– It makes a local variable,

called button, refer to the only button element on the form, and

– inserts the newField element just before this button element

– Then… (see next slide)




//Now add a legend to the new fieldset newLegend = document.createElement("legend"); newField.appendChild(newLegend);

newLegendText = document.createTextNode( "What is your post code?"); newLegend.appendChild(newLegendText);


• Then …– It creates a new legend

element– It attaches this legend

element as a child to the fieldset element

– It creates a new text node containing the string “What is your post code?”

– It attaches this text node as a child of the legend element

– Then… (see next slide)

handleCountryChange (contd.)function handleCountryChange(someEvent) { var form = document. getElementsByTagName("form")[0]; //Maybe the user has just changed his mind about the country. //If so, remove any postCodeField element that had been created //when he made his previous choice. possibleExistingPostCodeField= document.getElementById("postCodeField"); if (possibleExistingPostCodeField) {form. removeChild(possibleExistingPostCodeField); } //Now, react to the new value for country var country = document.getElementById("country"); if ( country.value!="“ ) {if ( country.value!="ie“ ) { //Create new fieldset element newField = document.createElement("fieldset"); newField.setAttribute("id","postCodeField");


//Now add a legend to the new fieldset newLegend = document.createElement("legend"); newField.appendChild(newLegend);

newLegendText = document.createTextNode( "What is your post code?"); newLegend.appendChild(newLegendText);

//Now insert an input box into the new fieldset

newInput = document.createElement("input");

newField.appendChild(newInput); newInput.setAttribute("type","text");

newInput.setAttribute("name","postCode"); } } }

• Then …– It creates a new input

element– It attaches this input

element as a child to the fieldset element

– It specifies that the new input element is of type text

– It gives the name postCode to the new input element

• And, finally, that’s it

Documents

Manipulating styles through DOM scripting. Last year, we saw three approaches to style specification Accessing an external stylesheet –Using the link