JavaScript Bible, Gold Edition part 208 pot

Chapter 30 ExamplesThe following sections contain examples from Chapter 30, “Style sheet and Style Objects.” styleSheet Object Properties cssRules NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 I

Trang 1

The two functions that report the results employ a bit of filtering to make sure that they process the event object only if the event occurs on an element and if the

relatedTargetelement is anything other than a nested text node of the central table cell element Because nodes respond to events in NN6, this extra filtering prevents processing whenever the cursor makes the transition from the central TD element to its nested text node

Listing 29-21: Using the relatedTarget Property

<HTML>

<HEAD>

<TITLE>relatedTarget Properties</TITLE>

.direction {background-color:#00FFFF; width:100; height:50; text-align:center}

#main {background-color:#FF6666; text-align:center}

</STYLE>

function showArrival(evt) {

if (evt.target.nodeType == 1) {

if (evt.relatedTarget != evt.target.firstChild) { var direction = (evt.relatedTarget.firstChild) ? evt.relatedTarget.firstChild.nodeValue : “parts unknown”

status = “Arrived from: “ + direction }

} } function showDeparture(evt) {

if (evt.target.nodeType == 1) {

if (evt.relatedTarget != evt.target.firstChild) { var direction = (evt.relatedTarget.firstChild) ? evt.relatedTarget.firstChild.nodeValue : “parts unknown”

status = “Departed to: “ + direction }

} }

</SCRIPT>

</HEAD>

<BODY>

<H1>relatedTarget Properties</H1>

<HR>

<P>Roll the mouse to the center box and look for arrival information

in the status bar Roll the mouse away from the center box and look for departure information in the status bar.</P>

<TR><TD></TD><TD CLASS=”direction”>North</TD><TD></TD></TR>

<TD ID=”main” onMouseOver=”showArrival(event)”

onMouseOut=”showDeparture(event)”>Roll</TD>

(NN6) eventObject.relatedTarget

Trang 2

<TR><TD></TD><TD CLASS=”direction”>South</TD><TD></TD></TR>

</TABLE>

</BODY>

</HTML>

target

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓

Example

As a simplified demonstration of the power of the targetproperty, Listing 29-22

has but two event handlers defined for the BODY element, each invoking a single

function The idea is that the onMouseDownand onMouseUpevents will bubble up

from whatever their targets are, and the event handler functions will find out which

element is the target and modify the color style of that element

An extra flair is added to the script in that each function also checks the className

property of the target element If the classNameis bold— a class name shared by

three SPAN elements in the paragraph — the style sheet rule for that class is

modi-fied so that all items share the same color Your scripts can do even more in the

way of filtering objects that arrive at the functions to perform special operations on

certain objects or groups of objects

Notice that the scripts don’t have to know anything about the objects on the page

to address each clicked one individually That’s because the targetproperty

pro-vides all of the specificity needed for acting on the target element

Listing 29-22: Using the target Property

<HTML>

<HEAD>

<TITLE>target Property</TITLE>

Continued

(NN6) eventObject.target

Trang 3

Listing 29-22 (continued)

.bold {font-weight:bold}

.ital {font-style:italic}

</STYLE>

function highlight(evt) { var elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target

if (elem.className == “bold”) { document.styleSheets[0].cssRules[0].style.color = “red”

} else { elem.style.color = “#FFCC00”

} } function restore(evt) { var elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target

if (elem.className == “bold”) { document.styleSheets[0].cssRules[0].style.color = “black”

} else { elem.style.color = “black”

} }

</SCRIPT>

</HEAD>

<H1>target Property</H1>

<HR>

<P>One event handler </P>

<UL>

<LI>Can

<LI>Cover

<LI>Many

<LI>Objects

</UL>

<P>

Lorem ipsum dolor sit amet, consectetaur adipisicing elit,

<SPAN CLASS=”bold”>sed do </SPAN>eiusmod tempor incididunt

<SPAN CLASS=”ital”>ut labore et </SPAN>dolore magna aliqua

Ut enim adminim veniam, <SPAN CLASS=”bold”>quis nostrud exercitation </SPAN>ullamco laboris nisi ut aliquip ex ea

<SPAN CLASS=”bold”>commodo consequat</SPAN>.

</P>

</BODY>

</HTML>

(NN6) eventObject.target

Trang 4

Example

Listing 29-23 uses the timeStampproperty to calculate the instantaneous typing

speed when you type into a TEXTAREA The calculations are pretty raw,and work

only on intra-keystroke times without any averaging or smoothing that a more

sophisticated typing tutor might perform Calculated values are rounded to the

nearest integer

Listing 29-23: Using the timeStamp property

<HTML>

<HEAD>

<TITLE>timeStamp Property</TITLE>

var stamp

function calcSpeed(evt) {

if (stamp) {

var gross = evt.timeStamp - stamp

var wpm = Math.round(6000/gross)

document.getElementById(“wpm”).firstChild.nodeValue = wpm + “ wpm.”

}

stamp = evt.timeStamp

}

</SCRIPT>

</HEAD>

<BODY>

<H1>timeStamp Property</H1>

<HR>

<P>Start typing, and watch your instantaneous typing speed below:</P>

<P>

</P>

<P>Typing Speed: <SPAN ID=”wpm”> </SPAN></P>

</BODY>

</HTML>

(NN6) eventObject.timeStamp

Trang 5

Chapter 30 Examples

The following sections contain examples from Chapter 30, “Style sheet and Style Objects.”

styleSheet Object

Properties

cssRules

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

Example

Use The Evaluator (Chapter 13) to look at the cssRulesproperty in NN6+ or IE5+/Mac First, view how many rules are in the first styleSheet object of the page

by entering the following statement into the top text box:

document.styleSheets[0].cssRules.length

Now use the array with an index value to access one of the rule objects to view the rule object’s properties list Enter the following statement into the bottom text box:

document.styleSheets[0].cssRules[1]

You use this syntax to modify the style details of an individual rule belonging to the styleSheet object

cssText

styleSheetObject.cssText

Trang 6

Use The Evaluator (Chapter 13) to replace the style rules in one blast via the cssText

property Begin by examining the value returned from the property for the initially

disabled style sheet by entering the following statement into the top text box:

document.styleSheets[0].cssText

Next, enable the style sheet so that its rules are applied to the document:

document.styleSheets[0].disabled = false

Finally, enter the following statement into the top text box to overwrite the style

sheet with entirely new rules

document.styleSheets[0].cssText = “P {color:red}”

Reload the page after you are finished to restore the original state

disabled

Example

Use The Evaluator (Chapter 13) to toggle between the enabled and disabled state of

the first styleSheet object on the page Enter the following statement into the top

text box:

document.styleSheets[0].disabled = (!document.styleSheets[0].disabled)

The inclusion of the NOT operator (!) forces the state to change from trueto

falseor falseto truewith each click of the Evaluate button

ownerNode

styleSheetObject.ownerNode

Trang 7

Use The Evaluator (Chapter 13) with NN6 to inspect the ownerNodeof the first styleSheet object in the document Enter the following statement into the top text box:

document.styleSheets[0].ownerNode.tagName

The returned value is the STYLE element tag name

owningElement

Example

Use The Evaluator (Chapter 13) with IE4+ to inspect the owningElementof the first styleSheet object in the document Enter the following statement into the top text box:

document.styleSheets[0].owningElement.tagName

The returned value is the STYLE element tag name

rules

Example

Use The Evaluator (Chapter 13) with IE4+ to examine the rulesproperty of the first styleSheet object in the page First, find out how many rules are in the first

styleSheet object by entering the following statement into the top text box:

document.styleSheets[0].rules.length

styleSheetObject.rules

Trang 8

into the bottom text box:

document.styleSheets[0].rules[1]

You now see the all the properties that IE4+ exposes for a rule object

Methods

addRule(“selector“, “styleSpec“[, index])

removeRule(index)

Example

Use The Evaluator (Chapter 13) with IE4+ to add a style sheet rule to the first

styleSheet object of the page First, make sure the style sheet is enabled by entering

the following statement into the top text box:

Next, append a style that sets the color of the TEXTAREA element:

document.styleSheets[0].addRule(“TEXTAREA”, “color:red”)

Enter any valid object (such as document.body) into the bottom text box to see

how the style has been applied to the TEXTAREA element on the page

Now remove the style, using the index of the last item of the rulescollection as the

index:

document.styleSheets[0].removeRule(document.styleSheets[0].rules.length - 1)

The text in the TEXTAREA returns to its default color

styleSheetObject.addRule()

Trang 9

deleteRule(index) insertRule(“rule”, index)

Example

Use The Evaluator (Chapter 13) with NN6+ to add a style sheet rule to the first styleSheet object of the page First, make sure the style sheet is enabled by entering the following statement into the top text box:

Next, append a style that sets the color of the TEXTAREA element:

document.styleSheets[0].insertRule(“TEXTAREA {color:red}”, document.styleSheets[0].cssRules.length)

Enter any valid object (such as document.body) into the bottom text box to see how the style has been applied to the TEXTAREA element on the page

Now remove the style, using the index of the last item of the rules collection as the index:

document.styleSheets[0].deleteRule(document.styleSheets[0].cssRules.length - 1)

The first release of NN6 processes most, but not all, of the internal actions in response to the deleteRule()method The method returns no value, so the Results box after evaluating the deleteRule()example statement correctly reports undefined At the same time, the method has genuinely removed the rule from the styleSheet object (as proven by inspecting the lengthproperty of the

document.styleSheets[0].cssRulesarray) But the browser does not refresh the page display to reflect the removal of the rule

styleSheetObject.deleteRule()

Trang 10

cssRule and rule Objects

Properties

selectorText

Example

Use The Evaluator (Chapter 13) to examine the selectorTextproperty of rules in

the first styleSheet object of the page Enter each of the following statements in the

top text box:

document.styleSheets[0].rules[0].selectorText

document.styleSheets[0].rules[1].selectorText

Compare these values against the source code view for the STYLE element in the

page

style

Example

Use The Evaluator (Chapter 13) to modify a styleproperty of one of the styleSheet

rules in the page The syntax shown here is for IE4+, but you can substitute the

cssRulesreference for the rulescollection reference in NN6 (and IE5/Mac) if you

like

ruleObject.style

Định dạng
Số trang	10
Dung lượng	92,25 KB