JavaScript Bible, Gold Edition part 97 potx

Value: Length negative values for outdenting; percentage relative to inherited value Example:elementRef.style.textIndent = “2.5em” textJustify Controls: Additional detailed specification

textDecorationLineThrough

textDecorationNone

textDecorationOverline

textDecorationUnderline

Controls: Individual text decoration characteristics for text, allowing for multiple

decorations to be applied to the same text

Value: Boolean (not strings) true | false

Example:elementRef.style.textDecorationUnderline = true

textIndent

Controls: Amount of indentation for the first line of a block text element (e.g., P).

Value: Length (negative values for outdenting); percentage (relative to inherited

value)

Example:elementRef.style.textIndent = “2.5em”

textJustify

Controls: Additional detailed specifications for an element whose textAlign

property is set to justify

Value: Constant auto| distribute| distribute-all-lines | distribute-center-last | inter-cluster| inter-ideograph | inter-word|

kashida | newspaper

Example:elementRef.style.textJustify = “distribute”

elementRef.style.textJustify

Reserved for future use

textKashidaSpace

Controls: Ratio of kashida expansion to white space expansion for Arabic writing

systems

Value: Percentage

Example:elementRef.style.textKashidaSpace = “90%”

textShadow

Controls: Shadow rendering around text characters Note: The style attribute for

this property is not implemented in IE5/Mac or NN6, but the property is listed as

valid for a styleobject

Value: Each shadow specification consists of an optional color and three

space-delimited length values (horizontal shadow offset, vertical shadow offset, blur

radius length) Multiple shadow specifications are comma-delimited

textTransform

Controls: Case rendering of the text (meaning without altering the case of the

original text)

elementRef.style.textTransform

Value: Constant none| capitalize | lowercase| uppercase

Example:elementRef.style.textTransform = “uppercase”

textUnderlinePosition

Controls: Whether an underline text decoration is displayed above or

below the text Seems redundant with textDecorationUnderlineand

textDecorationOverline

Value: Constant above | below

Example:elementRef.style.textUnderlinePosition = “above”

unicodeBidi

Controls: Within bi-directional text (for example, English and Arabic), to what

extent an alternate direction text block is embedded within the outer element

Value: Constant normal| embed | bidi-override

Example:elementRef.style.unicodeBidi = “embed”

whiteSpace

Controls: Treatment of white space characters within an element’s source code.

Value: Constant normal| nowrap| pre

Example:elementRef.style.whiteSpace = “nowrap”

elementRef.style.whiteSpace

Controls: Word breaking characteristics, primarily for Asian-language text or text

containing a mixture of Asian and Latin characters

Value: Constant normal| break-all| keep-all

Example:elementRef.style.wordBreak = “break-all”

wordSpacing

Controls: Spacing between words.

Value: Length (usually in em units); Constant normal

Example:elementRef.style.wordSpacing = “1em”

wordWrap

Controls: Word wrapping characteristics of text in a block element, explicitly sized

inline element, or positioned element

Value: Constant normal | break-word

Example:elementRef.style.wordWrap = “break-word”

writingMode

elementRef.style.writingMode

Controls: Direction of content flow (left-to-right/bottom or

top-to-bottom/right-to-left, as in some Asian languages)

Value: Constant lr-tb| tb-rl

Example: elementRef.style.writingMode = “tb-rl”

Inline display and layout properties clear

Controls: Layout orientation of an element with respect to a neighboring floating

element

Value: Constant both| left| none| right

Example:elementRef.style.clear = “right”

clip

Controls: The clipping rectangle of an element (that is, the position of the

rectangle through which the user sees an element’s content)

Value:rect(topLength, rightLength, bottomLength, leftLength)| auto

Example: elementRef.style.clip = “rect(10px, 300px, 200px, 0px)”

clipBottom

clipLeft

clipRight

clipTop

elementRef.style.clipBottom

Controls: Individual edges of the clipping rectangle of an element These

properties are read-only properties of the currentStyleobject

Value: Length | auto

Example:var leftEdge = elementRef.currentStyle.clipLeft

content

Controls: The content rendered by an element Note: The style attribute for this

property is not implemented in IE5/Mac or NN6, but the property is listed as valid

for a styleobject

Value: See http://www.w3.org/TR/REC-CSS2/generate.html#propdef-content

counterIncrement

Controls: The jumps in counter values to be displayed via the contentstyle

property Note: The style attribute for this property is not implemented in IE5/Mac

or NN6, but the property is listed as valid for a style object

Value: One or more pairs of counter identifier and integers.

counterReset

Controls: Resets a named counter for content to be displayed via the content

style property Note: The style attribute for this property is not implemented in

IE5/Mac or NN6, but the property is listed as valid for a styleobject

Value: One or more pairs of counter identifier and integers.

elementRef.style.counterReset

Controls: Horizontal alignment of an element that allows other content to wrap

around the element (usually text wrapping around an image) Corresponds to the CSS float style attribute See also the floatStyleproperty, below Floating (non-positioned) elements follow a long sequence of rules for their behavior, detailed at

http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-float

Value: Constant left | right| none

Example: elementRef.style.cssFloat = “right”

cursor

Controls: The icon used for the cursor on the screen from a library of

system-generated cursors The CSS2 specification defines syntax for downloadable cursors, but this feature is not implemented as of IE5.5 or NN6

Value: Constant auto| crosshair | default | e-resize| help| move|

n-resize | ne-resize| nw-resize| pointer | s-resize| se-resize|

sw-resize | text| w-resize | wait

Example:elementRef.style.cursor = “hand”

direction

Controls: Layout direction (left-to-right or right-to-left) of inline text (same as DIR

attribute of an element)

Value: Constant ltr| rtl

Example:elementRef.style.direction = “rtl”

elementRef.style.direction

Controls: Whether an element is displayed on the page Content surrounding an

undisplayed element cinches up to occupy the undisplayed element’s space — as if

the element didn’t exist for rendering purposes (see the visibilityproperty for

a different approach) Commonly used to hide or show segments of a graphical

tree structure Also used to direct the browser to display an element as inline or

block-level element Some special-purpose values are associated with specific

element types (for example, lists, table cells, and so on)

Value: Constant block| compact| inline| inline-table | list-item| none

| run-in| table| table-caption| table-cell | table-column-group |

table-footer-group| table-header-group | table-row | table-row-group

Example:elementRef.style.display = “none”

// removes element from page

filter

Controls: Rendering effects on static content and on transitions between hiding

and showing elements Microsoft made a massive overhaul of the filter style

sheet syntax for IE5.5/Windows (using the DXImageTransform ActiveX control) A

handy online utility lets you preview the filter results and provides copy-and-paste

code you can use to start adding filters and scripted control of filters to your

pages See http://msdn.microsoft.com/workshop/samples/author/dhtml/

DXTidemo/DXTidemo.htm.Scripting transitions require several steps to load the

transition and actions before playing the transition Use style.filterto read or

write the entire filter specification string; use the elem.styles[i]object to

access individual filter properties See discussion of the filterobject later in this

chapter

Value: Filter specification as string.

Example:var filterSpec= elementRef.style.filter =“alpha(opacity=50)

flipH()”

elementRef.style.filter

Controls: Horizontal alignment of an element that allows other content to wrap

around the element (usually text wrapping around an image) Corresponds to the CSS floatstyle attribute See also the cssFloatproperty, above Floating (non-positioned) elements follow a long sequence of rules for their behavior, detailed at

http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-float

Value: Constant left | right| none

Example:elementRef.style.floatStyle = “right”

layoutGrid

Controls: Page grid properties (primarily for Asian-language pages).

Value: Combination values: layoutGridMode || layoutGridType||

layoutGridLine || layoutGridChar.See individual properties for their value formats

Example:elementRef.style.layoutGrid = “2em strict”

layoutGridChar

Controls: Size of the character grid (Asian languages).

Value: Length; Percentage; Constant none| auto

Example:elementRef.style.layoutGridChar = “2em”

elementRef.style.layoutGridChar

Controls: Line height of the grid (Asian languages).

Value: Value: Length; Percentage; Constant none| auto

Example:elementRef.style.layoutGridLine = “110%”

layoutGridMode

Controls: One- or two-dimensional grid (Asian languages).

Value: Constant both| none| line| char

Example:elementRef.style.layoutGridMode = “both”

layoutGridType

Controls: Type of grid for text content (Asian languages).

Value: Constant loose| strict| fixed

Example:elementRef.style.layoutGridType = “strict”

markerOffset

elementRef.style.markerOffset