style object (Windows)

0 out of 1 rated this helpful - Rate this topic

Represents the current settings of all possible inline styles for a given element.

Members

The style object has these types of members:

Methods
Properties

Methods

The style object has these methods.

Method	Description
getAttribute	Retrieves the value of the specified attribute.
getAttributeNode	Retrieves an attribute object referenced by the attribute.name property.
getPropertyPriority	Gets the priority of a CSS property if the priority is explicitly set in the current declaration block.
getPropertyValue	Gets the value of a CSS property if it is explicitly set within the current declaration block.
hasAttribute	Determines whether an attribute with the specified name exists.
hasAttributes	Determines whether one or more attributes exist for the object.
item	Gets a property that has been explicitly set in the current declaration block.
msGetPropertyEnabled	Returns whether a given property in the style object is enabled.
msPutPropertyEnabled	Sets whether a given property in the style object is enabled.
normalize	Merges adjacent DOM objects to produce a normalized document object model.
removeAttribute	Removes an attribute from an object.
removeAttributeNode	Removes an attribute object from the object.
removeProperty	Removes a CSS property if it is explicitly set within the current declaration block.
setAttribute	Sets the value of the specified attribute.
setAttributeNode	Sets an attribute object node as part of the object.
setProperty	Sets a property value and priority within the current declaration block.

Properties

The style object has these properties.

Property	Description
accelerator	Sets or retrieves a string that indicates whether the object represents a keyboard shortcut.
animation	Specifies one or more shorthand values that define all animation properties (except animation-play-state) for a set of corresponding object properties identified in the CSS @keyframes at-rule specified by the animations-name property.
animationDelay	Specifies the offset within an animation cycle (the amount of time from the start of a cycle) before the animation is displayed for a set of corresponding object properties identified in the CSS @keyframes at-rule specified by the animation-name property.
animationDirection	Specifies the direction of play for an animation cycle.
animationDuration	Specifies the length of time to complete one cycle of the animation.
animationFillMode	Specifies whether the effects of an animation are visible before or after it plays.
animationIterationCount	Specifies the number of times an animation cycle is played.
animationName	Identifies one or more animation names. An animation name selects a CSS @keyframes at-rule.
animationPlayState	Specifies whether an animation is playing or paused.
animationTimingFunction	Specifies the intermediate property values to be used during a single cycle of an animation on a set of corresponding object properties identified in the CSS @keyframes at-rule specified by the animation-name property.
attributes	Retrieves a collection of attributes of the object.
backfaceVisibility	Gets or sets a value that specifies whether the back face (reverse side) of an object is visible.
background	Specifies up to five separate background properties of an object.
backgroundAttachment	Specifies how the background image (or images) is attached to the object within the document.
backgroundClip	Specifies the background painting area or areas relative to the element's bounding boxes.
backgroundClip	Specifies the background painting area or areas relative to the element's bounding boxes.
backgroundClip	Specifies the background painting area or areas relative to the element's bounding boxes.
backgroundColor	Specifies the color behind the content of the object.
backgroundImage	Specifies the background image or images of the object.
backgroundOrigin	Specifies the positioning area of an element or multiple elements.
backgroundOrigin	Specifies the positioning area of an element or multiple elements.
backgroundPosition	Specifies the position of the background of the object.
backgroundPositionX	The x-coordinate of the background-position property.
backgroundPositionY	The y-coordinate of the background-position property.
backgroundRepeat	Specifies whether and how the background image (or images) is tiled.
backgroundSize	Specifies the size of the background images.
backgroundSize	Specifies the size of the background images.
baselineShift	Sets or retrieves a value that indicates how the dominant baseline should be repositioned relative to the dominant baseline of the parent text content element.
behavior	Sets or retrieves the location of the Dynamic HTML (DHTML) behaviorDHTML Behaviors.
border	Specifies the properties of a border drawn around an object.
borderBottom	Specifies the properties of the bottom border of the object.
borderBottomColor	Specifies the foreground color of the bottom border of an object.
borderBottomLeftRadius	Specifies the radii of the quarter ellipse that defines the shape of the lower-left corner for the outer border edge of the current box.
borderBottomRightRadius	Sets or retrieves one or two values that define the radii of the quarter ellipse that defines the shape of the lower-right corner for the outer border edge of the current box.
borderBottomStyle	Specifies the style of the bottom border of the object.
borderBottomWidth	Specifies the thickness of the bottom border of the object.
borderCollapse	Indicates whether the row and cell borders of a table are joined in a single border or detached as in standard HTML.
borderColor	Specifies the border color of the object.
borderLeft	Specifies the properties of the left border of the object.
borderLeftColor	Specifies the foreground color of the left border of an object.
borderLeftStyle	Sets or retrieves the style of the left border of the object.
borderLeftWidth	Specifies the thickness of the left border of the object.
borderRadius	Specifies the radii of a quarter ellipse that defines the shape of the corners for the outer border edge of the current box.
borderRight	Specifies the properties of the right border of the object.
borderRightColor	Specifies the foreground color of the right border of an object.
borderRightStyle	Specifies the style of the right border of the object.
borderRightWidth	Specifies the thickness of the right border of the object.
borderSpacing	Specifies the distance between the borders of adjoining cells in a table.
borderStyle	Specifies the style of the left, right, top, and bottom borders of the object.
borderTop	Specifies the properties of the top border of the object.
borderTopColor	Specifies the foreground color of the top border of an object.
borderTopLeftRadius	Sets or retrieves one or two values that define the radii of the quarter ellipse that defines the shape of the upper-left corner for the outer border edge of the current box.
borderTopRightRadius	Sets or retrieves one or two values that define the radii of the quarter ellipse that defines the shape of the upper-right corner for the outer border edge of the current box.
borderTopStyle	Specifies the style of the top border of the object.
borderTopWidth	Specifies the thickness of the top border of the object.
borderWidth	Specifies the thicknesses of the left, right, top, and bottom borders of an object.
bottom	Sets or retrieves the bottom position of the object in relation to the bottom of the next positioned object in the document hierarchy.
boxShadow	Specifies one or more set of shadow values that attaches one or more drop shadows to the current box.
boxSizing	Sets or retrieves the box model to use for object sizing.
breakAfter	Gets or sets the column-break behavior that follows a content block in a multi-column element.
breakBefore	Gets or sets the column-break behavior that precedes a content block in a multi-column element.
breakInside	Gets or sets the column-break behavior that occurs within a content block in a multi-column element.
captionSide	Sets or retrieves where the caption of a table is located.
clear	Specifies whether the object allows floating objects on its left side, right side, or both, so that the next text displays past the floating objects.
clip	Specifies which part of a positioned object is visible.
clipBottom	Gets the bottom coordinate of the object clipping region.
clipLeft	Gets the left coordinate of the object clipping region.
clipPath	Sets or retrieves a reference to the SVG graphical object that will be used as the clipping path.
clipRight	Gets the right coordinate of the object clipping region.
clipTop	Gets the top coordinate of the object clipping region.
color	The foreground color of the text of an object.
columnCount	Gets or sets the optimal number of columns in a multi-column element.
columnFill	Gets or sets a value that indicates how the column lengths in a multi-column element are affected by the content flow.
columnGap	Gets or sets the width of the gap between columns in a multi-column element.
columnRule	Gets or sets a shorthand value that specifies values for the columnRuleWidth, columnRuleStyle, and the columnRuleColor of a multi-column element.
columnRuleColor	Gets or sets the color for all column rules in a multi-column element.
columnRuleStyle	Gets or sets the style for all column rules in a multi-column element.
columnRuleWidth	Gets or sets the width of all column rules in a multi-column element.
columnSpan	Gets or sets the number of columns that a content block spans in a multi-column element.
columnWidth	Gets or sets the optimal width of the columns in a multi-column element.
constructor	Returns a reference to the constructor of an object.
content	Sets or retrieves generated content to insert before or after an element.
counterIncrement	Sets or retrieves a list of counters to increment.
counterReset	Sets or retrieves a list of counters to create or reset to zero.
cssFloat	Sets or retrieves a value that specifies whether a box should float to the left, right, or not at all.
cssText	Sets or retrieves the persisted representation of the style rule.
cursor	Specifies the type of cursor to display as the mouse pointer moves over the object.
direction	Specifies the reading order of the object.
display	Gets or sets a value that indicates whether and how the object is rendered.
dominantBaseline	Sets or retrieves a value that determines or redetermines a scaled-baseline table.
emptyCells	Determines whether to show or hide a cell without content.
fill	Sets or retrieves a value that indicates the color to paint the interior of the given graphical element.
fillOpacity	Sets or retrieves a value that specifies the opacity of the painting operation that is used to paint the interior of the current object.
fillRule	Sets or retrieves a value that indicates the algorithm that is to be used to determine what parts of the canvas are included inside the shape.
font	Sets or retrieves a combination of separate font properties of the object. Alternatively, sets or retrieves one or more of six user-preference fonts.
fontFamily	Sets or retrieves the name of the font used for text in the object.
fontSize	Sets or retrieves a value that indicates the font size used for text in the object.
fontSizeAdjust	Sets or retrieves a value that specifies an aspect value for an element that will effectively preserve the x-height of the first choice font, whether it is substituted or not.
fontStretch	Sets or retrieves a value that indicates a normal, condensed, or expanded face of a font family.
fontStretch	Sets or retrieves a value that indicates a normal, condensed, or expanded face of a font family.
fontStyle	Sets or retrieves the font style of the object as italic, normal, or oblique.
fontVariant	Gets or sets whether the text of the object is in small capital letters.
fontWeight	Gets of sets the weight of the font of the object.
glyphOrientationHorizontal	Sets or retrieves a value that alters the orientation of a sequence of characters relative to an inline-progression-direction of horizontal.
glyphOrientationVertical	Sets or retrieves a value that alters the orientation of a sequence of characters relative to an inline-progression-direction of vertical.
height	Sets or retrieves the height of the object.
imeMode	Sets or retrieves the state of an IME.
kerning	Gets or sets a value that indicates whether Windows Store app using JavaScript should adjust inter-glyph spacing based on kerning tables that are included in the relevant font (that is, enable auto-kerning) or instead disable auto-kerning and set inter-character spacing to a specific length (typically zero).
layoutGrid	Sets or retrieves the composite document grid properties that specify the layout of text characters.
layoutGridChar	Sets or retrieves the size of the character grid used for rendering the text content of an element.
layoutGridLine	Sets or retrieves the gridline value used for rendering the text content of an element.
layoutGridMode	Gets or sets whether the text layout grid uses two dimensions.
layoutGridType	Sets or retrieves the type of grid used for rendering the text content of an element.
left	Sets or retrieves the position of the object relative to the left edge of the next positioned object in the document hierarchy.
length	Retrieves the number of properties that are explicitly set on the parent object.
letterSpacing	Sets or retrieves the amount of additional space between letters in the object.
lineHeight	Sets or retrieves the distance between lines in the object.
listStyle	Sets or retrieves up to three separate list-style properties of the object.
listStyleImage	Sets or retrieves a value that indicates which image to use as a list-item marker for the object.
listStylePosition	Sets or retrieves a variable that indicates how the list-item marker is drawn relative to the content of the object.
listStyleType	Sets or retrieves the predefined type of the line-item marker for the object.
margin	Sets or retrieves the width of the top, right, bottom, and left margins of the object.
marginBottom	Sets or retrieves the height of the bottom margin of the object.
marginLeft	Sets or retrieves the width of the left margin of the object.
marginRight	Sets or retrieves the width of the right margin of the object.
marginTop	Sets or retrieves the height of the top margin of the object.
marker	Sets or retrieves a value that specifies the marker symbol that is used for all vertices on the given path element or basic shape.
markerEnd	Sets or retrieves a value that defines the arrowhead or polymarker that is drawn at the final vertex of a given path element or basic shape.
markerMid	Sets or retrieves a value that defines the arrowhead or polymarker that is drawn at every other vertex (that is, every vertex except the first and last) of a given path element or basic shape.
markerStart	Sets or retrieves a value that defines the arrowhead or polymarker that is drawn at the first vertex of a given path element or basic shape.
mask	Sets or retrieves a value that indicates a SVG mask.
maxHeight	Sets or retrieves the maximum height for an element.
maxWidth	Sets or retrieves the maximum width for an element.
minHeight	Sets or retrieves the minimum height for an element.
minWidth	Sets or retrieves the minimum width for an element.
msBlockProgression	Sets or retrieves the block progression and layout orientation.
msGridColumn	Gets or sets a value that specifies in which column of the grid to place the object.
msGridColumnAlign	Gets or sets a value that specifies the horizontal alignment of the object within the grid column.
msGridColumns	Gets or sets one or more values that specify the width of each grid column within the object.
msGridColumnSpan	Gets or sets a value that specifies the number of columns of the grid that the object spans.
msGridRow	Gets or sets a value that specifies in which row of the grid to place the object.
msGridRowAlign	Gets or sets a value that specifies the vertical alignment of the object within the grid row.
msGridRows	Gets or sets one or more values that specify the height of each grid row within the object.
msGridRowSpan	Gets or sets a value that specifies the number of rows of the grid that the object spans.
msProgressAppearance	This property is obsolete. Use animation-name instead.
opacity	Gets or sets a value that specifies object or group opacity in CSS or SVG.
orphans	Sets or retrieves the minimum number of lines of a paragraph that must appear at the bottom of a page.
outline	Sets or retrieves the color, style, and width of the outline frame.
outlineColor	Sets or retrieves the color of the outline frame.
outlineStyle	Sets or retrieves the style of the outline frame.
outlineWidth	Sets or retrieves the width of the outline frame.
overflow	Sets or retrieves a value indicating how to manage the content of the object when the content exceeds the height or width of the object.
overflowX	Sets or retrieves how to manage the content of the object when the content exceeds the width of the object.
overflowY	Sets or retrieves how to manage the content of the object when the content exceeds the height of the object.
padding	Sets or retrieves the amount of space to insert between the object and its margin or, if there is a border, between the object and its border.
paddingBottom	Sets or retrieves the amount of space to insert between the bottom border of the object and the content.
paddingLeft	Sets or retrieves the amount of space to insert between the left border of the object and the content.
paddingRight	Sets or retrieves the amount of space to insert between the right border of the object and the content.
paddingTop	Sets or retrieves the amount of space to insert between the top border of the object and the content.
pageBreakAfter	Sets or retrieves a value indicating whether a page break occurs after the object.
pageBreakBefore	Sets or retrieves a string indicating whether a page break occurs before the object.
pageBreakInside	Sets or retrieves a string indicating whether a page break is allowed to occur inside the object.
parentRule	Retrieves the containing rule, if the current rule is contained inside another rule.
perspective	Gets or sets a value that represents the perspective from which all child elements of the object are viewed.
perspectiveOrigin	Gets or sets one or two values that represent the origin (the vanishing point for the 3-D space) of an object with an perspective property declaration.
pixelBottom	Sets or retrieves the bottom position of the object.
pixelHeight	Sets or retrieves the height of the object.
pixelLeft	Sets or retrieves the left position of the object.
pixelRight	Sets or retrieves the right position of the object.
pixelTop	Sets or retrieves the top position of the object.
pixelWidth	Sets or retrieves the width of the object.
pointerEvents	Sets or retrieves a value that specifies under what circumstances a given graphics element can be the target element for a pointer event in SVG.
posBottom	Sets or retrieves the bottom position of the object in the units specified by the bottom attribute.
posHeight	Sets or retrieves the height of the object in the units specified by the height attribute.
position	Sets or retrieves the type of positioning used for the object.
posLeft	Sets or retrieves the left position of the object in the units specified by the left attribute.
posRight	Sets or retrieves the right position of the object in the units specified by the right attribute.
posTop	Sets or retrieves the top position of the object in the units specified by the top attribute.
posWidth	Sets or retrieves the width of the object in the units specified by the width attribute.
quotes	Sets or retrieves the pairs of strings to be used as quotes in generated content.
right	Sets or retrieves the position of the object relative to the right edge of the next positioned object in the document hierarchy.
role	Sets or retrieves the role for this element.
rubyAlign	Gets or sets a value that indicates how to align the ruby text content.
rubyOverhang	Gets or sets a value that indicates whether, and on which side, ruby text is allowed to partially overhang any adjacent text in addition to its own base, when the ruby text is wider than the ruby base
rubyPosition	Gets or sets a value that controls the position of the ruby text with respect to its base.
scrollbar3dLightColor	Sets or retrieves the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.
scrollbarArrowColor	Sets or retrieves the color of the arrow elements of a scroll arrow.
scrollbarBaseColor	Sets or retrieves the color of the main elements of a scroll bar, which include the scroll box, track, and scroll arrows.
scrollbarDarkShadowColor	Sets or retrieves the color of the gutter of a scroll bar.
scrollbarFaceColor	Sets or retrieves the color of the scroll box and scroll arrows of a scroll bar.
scrollbarHighlightColor	Sets or retrieves the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.
scrollbarShadowColor	Sets or retrieves the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.
scrollbarTrackColor	Sets or retrieves the color of the track element of a scroll bar.
stopColor	Sets or retrieves a value that indicates what color to use at the current gradient stop.
stopOpacity	Sets or retrieves a value that defines the opacity of the current gradient stop.
stroke	Sets or retrieves a value that indicates the color to paint along the outline of a given graphical element.
strokeDasharray	Sets or retrieves one or more values that indicate the pattern of dashes and gaps used to stroke paths.
strokeDashoffset	Sets or retrieves a value that specifies the distance into the dash pattern to start the dash.
strokeLinecap	Sets or retrieves a value that specifies the shape to be used at the end of open subpaths when they are stroked.
strokeLinejoin	Sets or retrieves a value that specifies the shape to be used at the corners of paths or basic shapes when they are stroked.
strokeMiterlimit	Sets or retrieves a value that indicates the limit on the ratio of the length of miter joins (as specified in the strokeLinejoin property).
strokeOpacity	Sets or retrieves a value that specifies the opacity of the painting operation that is used to stroke the current object.
strokeWidth	Sets or retrieves a value that specifies the width of the stroke on the current object.
styleFloat	Sets or retrieves on which side of the object the text will flow.
tableLayout	Sets or retrieves a string that indicates whether the table layout is fixed.
textAlign	Sets or retrieves whether the text in the object is left-aligned, right-aligned, centered, or justified.
textAlignLast	Gets or sets a value that indicates how to align the last line or only line of text in the specified object.
textAutospace	Sets or retrieves the autospacing and narrow space width adjustment of text.
textDecoration	Sets or retrieves a value that indicates whether the text in the object has blink, line-through, overline, or underline decorations.
textDecorationLineThrough	Sets or retrieves a Boolean value indicating whether the text in the object has a line drawn through it.
textDecorationNone	Sets or retrieves the Boolean value indicating whether the textDecoration property for the object has been set to none.
textDecorationOverline	Sets or retrieves a Boolean value indicating whether the text in the object has a line drawn over it.
textDecorationUnderline	Sets or retrieves whether the text in the object is underlined.
textIndent	Sets or retrieves the indentation of the first line of text in the object. This property is not supported for Windows Store apps using JavaScript.
textJustify	Sets or retrieves the type of alignment used to justify text in the object.
textOverflow	Sets or retrieves a value that indicates whether to render ellipses (...) to indicate text overflow.
textTransform	Sets or retrieves the rendering of the text in the object.
textUnderlinePosition	Sets or retrieves the position of the underline decoration that is set through the text-decoration property of the object.
top	Sets or retrieves the position of the object relative to the top of the next positioned object in the document hierarchy.
transform	Gets or sets a list of one or more transform functions that specify how to translate, rotate, or scale an element in 2-D or 3-D space.
transformOrigin	Gets or sets one or two values that establish the origin of transformation for an element.
transformStyle	Gets or sets a value that specifies how child elements of the object are rendered in 3-D space.
transition	Gets or sets one or more shorthand values that specify the transition properties for a set of corresponding object properties identified in the transition-property property.
transitionDelay	Gets or sets one or more values that specify the offset within a transition (the amount of time from the start of a transition) before the transition is displayed for a set of corresponding object properties identified in the transition property.
transitionDuration	Gets or sets one or more values that specify the durations of transitions on a set of corresponding object properties identified in the transition-property property.
transitionProperty	Gets or sets a value that identifies the CSS property name or names to which the transition effect (defined by the transition-duration, transition-timing-function, and transition-delay properties) is applied when a new property value is specified.
transitionTimingFunction	Gets or sets one or more values that specify the intermediate property values to be used during a transition on a set of corresponding object properties identified in the transition-property property.
unicodeBidi	Specifies the level of embedding with respect to the bidirectional algorithm.
verticalAlign	Sets or retrieves the vertical alignment of the object.
visibility	Sets or retrieves whether the content of the object is displayed.
whiteSpace	Sets or retrieves a value that indicates whether lines are automatically broken inside the object.
widows	Sets or retrieves the minimum number of lines of a paragraph that must appear at the top of a document.
width	Sets or retrieves the width of the object.
wordBreak	Sets or retrieves line-breaking behavior within words, particularly where multiple languages appear in the object.
wordSpacing	Sets or retrieves the amount of additional space between words in the object.
wordWrap	Sets or retrieves whether to break words when the content exceeds the boundaries of its container.
writingMode	Specifies the direction and flow of the content in the object.
zIndex	Sets or retrieves the stacking order of positioned objects.
zoom	Sets or retrieves the magnification scale of the object.

Standards information

There are no standards that apply here.

Remarks

Inline styles are CSS assignments that you apply directly to individual HTML elements using the STYLE attribute. Use the style object to examine these assignments and to make new assignments or change existing ones.

To retrieve the style object, apply the style keyword to an element object. To retrieve the current setting for an inline style, apply the corresponding style property to the style object.

The style object does not provide access to the style assignments in style sheets. To obtain information about styles in style sheets, use the styleSheets collection to access to the individual style sheets defined in the document.

The following properties are not available when the rule object accesses the style object: posHeight, posWidth, posTop, posLeft, pixelHeight, pixelWidth, pixelTop, and pixelLeft.

To change or clear multiple style properties simultaneously, use this object with the cssText property. For example, to change the font color and background color of a DIV element, you could use the following code:



<DIV onclick="this.style.cssText = 'color:red;background-color:blue;border:5px solid black;'">
Click this DIV to change style properties.</DIV>

Examples

This example uses the style object to set the document body text font to Verdana.


document.body.style.fontFamily = "Verdana"

This example positions all absolutely positioned images in the given document at the top of the document.


var oImages = document.all.tags("IMG");
if (oImages.length) {
    for (var iImg = 0; iImg < oImages.length; iImg++) {
        var oImg = oImages(iImg);
        if (oImg.style.position == "absolute") {
            oImg.style.top = 0;
        }
    }
}

This example copies the inline style of the second element (div2) to the first (div1) while preserving the styles of the second. The background color of div1 is overwritten during the assignment.


<DIV ID="div1" STYLE="background-color:blue;font-weight:bold">Item 1</DIV>
<DIV ID="div2" STYLE="background-color:red;font-size:18pt;
    font-family:Verdana;">Item 2</DIV>
<SCRIPT>
div1.style.cssText += (';' + div2.style.cssText);
</SCRIPT>

Build date: 11/29/2012

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)