JavaScript Bible, Gold Edition part 192 pdf

noShade NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Example See Listing 19-2 earlier in this chapter for an example of values that can be used to set the noShadeproperty of an HR element

Trang 1

Listing 19-2 (continued)

</SELECT>

<BR>

Select a rule color (IE only):

<OPTION VALUE=”green”>Green</OPTION>

<OPTION VALUE=”#FA8072”>Some Hex Triplet Value</OPTION>

</SELECT>

<BR>

Select a rule shading:

<OPTION VALUE=true>No Shading</OPTION>

<OPTION VALUE=false>Shading</OPTION>

</SELECT>

<BR>

Select a rule height:

<OPTION VALUE=2>2 (Default)</OPTION>

<OPTION VALUE=4>4 Pixels</OPTION>

<OPTION VALUE=10>10 Pixels</OPTION>

</SELECT>

<BR>

Select a rule width:

<OPTION VALUE=”100%”>100% (Default)</OPTION>

<OPTION VALUE=300>300 Pixels </OPTION>

</SELECT>

</BODY>

</HTML>

color

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

HR.color

Trang 2

See Listing 19-2 earlier in this chapter for an example of values that can be used to

set the colorproperty of an HR element object

noShade

Example

set the noShadeproperty of an HR element object Because of the buggy behavior

associated with setting this property, adjusting the property in the example has

unexpected (and usually undesirable) consequences

size

Example

set the sizeproperty of an HR element object

width

Example

set the widthproperty of an HR element object

HR.width

Trang 3

MARQUEE Element Object

Properties

behavior

Example

Listing 19-3 contains a page that demonstrates the changes to several MARQUEE element object properties: behavior, bgColor, direction, scrollAmount, and

scrollDelay This page and scripts are intended only for IE4+ See the description

of Listing 19-1 for details on the attribute setting script

Listing 19-3: Controlling MARQUEE Object Properties

<HTML>

<HEAD>

<TITLE>MARQUEE Object Properties</TITLE>

// one function does all!

function setMARQUEEAttr(select) {

if (document.all && document.all.myMARQUEE) { var choice = select.options[select.selectedIndex].value

if (choice) { document.all.myMARQUEE.setAttribute(select.name, choice) }

} }

</SCRIPT>

</HEAD>

<BODY>

<H1>MARQUEE Object Properties</H1>

<BR>

<HR>

<MARQUEE ID=”myMARQUEE” WIDTH=400 HEIGHT=24>This is the MARQUEE element object you will be controlling.</MARQUEE>

<FORM>

MARQUEE.behavior

Trang 4

<INPUT TYPE=”button” VALUE=”Start Marquee”

onClick=”document.all.myMARQUEE.start()”>

<INPUT TYPE=”button” VALUE=”Stop Marquee”

onClick=”document.all.myMARQUEE.stop()”>

<BR>

Select a behavior:

<OPTION VALUE=”alternate”>Alternate</OPTION>

<OPTION VALUE=”scroll”>Scroll</OPTION>

<OPTION VALUE=”slide”>Slide</OPTION>

</SELECT>

<BR>

Select a background color:

<OPTION VALUE=”green”>Green</OPTION>

<OPTION VALUE=”#FA8072”>Some Hex Triplet Value</OPTION>

</SELECT>

<BR>

Select a scrolling direction:

<OPTION VALUE=”right”>Right</OPTION>

</SELECT>

<BR>

Select a scroll amount:

<OPTION VALUE=6>6 (Default)</OPTION>

</SELECT>

<BR>

Select a scroll delay:

<OPTION VALUE=50>Short</OPTION>

<OPTION VALUE=85>Normal</OPTION>

</SELECT>

</BODY>

</HTML>

MARQUEE.behavior

Trang 5

Example

See Listing 19-3 earlier in this chapter for an example of how to apply values to the

bgColorproperty

direction

Example

directionproperty

scrollAmount scrollDelay

Example

scrollAmountand scrollDelayproperties

MARQUEE.scrollAmount

Trang 6

start()

stop()

Example

See Listing 19-3 earlier in this chapter for examples of both the start()and

stop()methods, which are invoked in event handlers of separate controlling

but-tons on the page Notice, too, that when you have the behavior set to slide,

stop-ping and restarting the MARQUEE does not cause the scroll action to start from a

blank region

Range Object

Properties

collapsed

Example

Use The Evaluator (Chapter 13) to experiment with the collapsedproperty

Reload the page and assign a new range to the aglobal variable by typing the

fol-lowing statement into the top text box:

a = document.createRange()

Next, set the range to encompass a node:

a.selectNode(document.body)

Range.collapsed

Trang 7

Enter a.collapsedinto the top text box The expression returns falsebecause the end points of the range are not the same

commonAncestorContainer

Example

Use The Evaluator (Chapter 13) to experiment with the commonAncestorContainer

property Reload the page and assign a new range to the aglobal variable by typing the following statement into the top text box:

Now set the start point to the beginning of the contents of the myEMelement and set the end point to the end of the surrounding myPelement:

a.setStartBefore(document.getElementById(“myEM”).firstChild) a.setEndAfter(document.getElementById(“myP”).lastChild)

Verify that the text range is set to encompass content from the myEMnode (the word “all”) and end of myPnodes:

a.toString()

Verify, too, that the two end point containers are different nodes:

a.startContainer.tagName a.endContainer.tagName

Finally, see what node contains both of these two end points:

a.commonAncestorContainer.id

The result is the myPelement, which both the myPand myEMnodes have in common

Range.commonAncestorContainer

Trang 8

startContainer

Example

Use The Evaluator (Chapter 13) to experiment with the endContainerand

startContainerproperties Reload the page and assign a new range to the a

global variable by typing the following statement into the top text box:

Now set the range to encompass the myEMelement:

a.selectNode(document.getElementById(“myEM”)

Inspect the containers for both the start and end points of the selection:

a.startContainer.id

a.endContainer.id

The range encompasses the entire myEMelement, so the start and end points are

outside of the element Therefore, the container of both start and end points is the

myPelement that also surrounds the myEMelement

endOffset

startOffset

Example

Use The Evaluator (Chapter 13) to experiment with the endOffsetand

startOffsetproperties, following similar paths you just saw in the description

Range.endOffset

Trang 9

Reload the page and assign a new range to the aglobal variable by typing the fol-lowing statement into the top text box:

Now set the range to encompass the myEMelement and then move the start point outward to a character within the myPelement’s text node:

a.selectNode(document.getElementById(“myEM”)) a.setStart(document.getElementById(“myP”).firstChild, 7)

Inspect the node types of the containers for both the start and end points of the selection:

a.startContainer.nodeType a.endContainer.nodeType

The startContainernode type is 3 (text node), while the endContainernode type is 1 (element) Now inspect the offsets for both the start and end points of the selection:

a.startOffset a.endOffset

Methods

cloneContents() cloneRange()

Example

When Netscape outfits the NN6 browser with the cloneContents()method, use The Evaluator (Chapter 13) to see the method in action Begin by creating a new range object that contains the text of the myPparagraph element

a = document.createRange() a.selectNode(document.getElementById(“myP”)

Range.cloneContents()

Trang 10

Next, clone the original range and preserve the copy in variable b:

b = a.cloneContents()

Move the original range so that it is an insertion point at the end of the body by

first expanding it to encompass the entire body and then collapse it to the end

a.selectNode(document.body)

a.collapse(false)

Now, insert the copy at the very end of the body:

a.insertNode(b)

If you scroll to the bottom of the page, you see a copy of the text

See the description of the compareBoundaryPoints()method later in this chapter

to see an example of the cloneRange()method

collapse([startBoolean])

Example

See Listings 19-11 and 15-14 to see the collapse()method at work (albeit with the

IE TextRangeobject)

compareBoundaryPoints(typeInteger,

sourceRangeRef)

Example

The page rendered by Listing 19-4 lets you experiment with text range comparisons

in NN6+ The bottom paragraph contains a SPAN element that has a Rangeobject

Range.compareBoundaryPoints()

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