EN
Dieser Inhalt ist in Ihrer Sprache leider nicht verfügbar. Im Folgenden finden Sie die englische Version.

runtimeStyle object

Represents the cascaded format and style of the object that overrides the format and style specified in global style sheets, inline styles, and HTML attributes.

Members

The runtimeStyle object has these types of members:

Methods

The runtimeStyle object has these methods.

MethodDescription
getAttribute

Retrieves the value of the specified attribute.

getExpression

This element is obsolete and should no longer be used. Retrieves the expression for the given property.

removeAttribute

Removes an attribute from an object.

removeExpression

This element is obsolete and should no longer be used. Removes the expression from the specified property.

setAttribute

Sets the value of the specified attribute.

setExpression

This element is obsolete and should no longer be used. Sets an expression for the specified object.

 

Properties

The runtimeStyle object has these properties.

PropertyAccess typeDescription

accelerator

Sets or retrieves a string that indicates whether the object represents a keyboard shortcut.

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.

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.

backgroundPosition

Specifies the position of the background of the object.

backgroundPositionX

Specifies the x-coordinate of the background-position property.

backgroundPositionY

Specifies 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.

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

Specifies the box model to use for object sizing.

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

Read/write

Specifies which part of a positioned object is visible.

color

The foreground color of the text of an object.

content

Specifies 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.

cssText

Read/write

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.

emptyCells

Determines whether to show or hide a cell without content.

font

Specifies a combination of separate font properties of the object. Alternatively, sets or retrieves one or more of six user-preference fonts.

fontFamily

Specifies the name of the font used for text in the object.

fontSize

Specifies a value that indicates the font size used for text in the object.

fontStretch

Specifies a value that indicates a normal, condensed, or expanded face of a font family.

fontStyle

Specifies the font style of the object as italic, normal, or oblique.

fontVariant

Specifies whether the text of the object is in small capital letters.

fontWeight

Specifies the weight of the font of the object.

height

Sets or retrieves the height of the object.

imeMode

Specifies the state of an IME.

layoutFlow

Specifies the direction and flow of the content in the object.

layoutGrid

Specifies the composite document grid properties that specify the layout of text characters.

layoutGridChar

Specifies the size of the character grid used for rendering the text content of an element.

layoutGridLine

Specifies the gridline value used for rendering the text content of an element.

layoutGridMode

Specifies whether the text layout grid uses two dimensions.

layoutGridType

Specifies 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.

letterSpacing

Specifies the amount of additional space between letters in the object.

lineBreak

Specifies line-breaking rules for text in selected languages such as Japanese, Chinese, and Korean.

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.

maxHeight

Sets or retrieves the maximum height for an element.

maxWidth

Sets or retrieves the maximum width for an element.

minHeight

Specifies the minimum height for an element.

minWidth

Sets or retrieves the minimum width for an element.

msBlockProgression

Specifies the block progression and layout orientation.

msInterpolationMode

Obsolete. Gets or sets the interpolation (resampling) method used to stretch images.

msProgressAppearance

Read/write

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

Specifies the color, style, and width of the outline frame.

outlineColor

Specifies the color of the outline frame.

outlineStyle

Specifies the style of the outline frame.

outlineWidth

Specifies 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

Defines 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.

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.

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.

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

Specifies the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.

scrollbarArrowColor

Specifies the color of the arrow elements of a scroll arrow.

scrollbarBaseColor

Specifies the base color of the main elements of a scroll bar.

scrollbarDarkShadowColor

Specifies the color of the gutter of a scroll bar.

scrollbarFaceColor

Specifies the color of the scroll box and scroll arrows of a scroll bar.

scrollbarHighlightColor

Specifies the color of the slider tray, and the top and left edges of the scroll box and scroll arrows of a scroll bar.

scrollbarShadowColor

Specifies the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.

scrollbarTrackColor

Specifies the color of the track element of a scroll bar.

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

Specifies whether the text in the object is left-aligned, right-aligned, centered, or justified.

textAlignLast

Specifies a value that indicates how to align the last line or only line of text in the specified object.

textAutospace

Specifies the autospacing and narrow space width adjustment of text.

textDecoration

Specifies a value that indicates whether the text in the object has blink, line-through, overline, or underline decorations.

textDecorationBlink

Sets or retrieves a Boolean value that indicates whether the object's textDecoration property has a value of "blink."

This property is not supported for Windows Store apps using JavaScript.

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

Specifies the indentation of the first line of text in the object.

This property is not supported for Windows Store apps using JavaScript.

textJustify

Specifies the type of alignment used to justify text in the object.

textKashidaSpace

Deprecated. Specifies the ratio of kashida expansion to white space expansion when justifying lines of text in the object.

textOverflow

Specifies a value that indicates whether to render ellipses (...) to indicate text overflow.

textTransform

Specifies the rendering of the text in the object.

textUnderlinePosition

Specifies 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.

unicodeBidi

Read/write

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.

widows

Sets or retrieves the minimum number of lines of a paragraph that must appear at the top of a document.

width

Specifies the width of the object.

wordBreak

Specifies line-breaking behavior within words, particularly where multiple languages appear in the object.

wordSpacing

Specifies the amount of additional space between words in the object.

wordWrap

Specifies 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

Specifies the magnification scale of the object.

 

Standards information

There are no standards that apply here.

Remarks

The runtimeStyle object sets and retrieves the format and style of an object, and overrides existing formats and styles in the process. Other than having precedence over the style object and not persisting, the runtimeStyle object is equivalent to the style object.

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.runtimeStyle.cssText = 'color:red; background-color:blue; border:5px solid black;'">
  Click this DIV to change style properties.
</div>

Windows Internet Explorer 8 or later. The behavior of setAttribute method depends on the current document compatibility mode. For more information, see Attribute Differences in Internet Explorer 8

Examples

This example sets a value on the runtimeStyle object to affect the currentStyle object, but not the style object.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/runtimeStyle.htm


<!DOCTYPE html>
<html>

<head>
  <title>runtimeStyle Object</title>
  <style>
    body {
      font-size: 8pt;
      font-family: Arial;
    }

    .datahead {
      font-size: 8pt;
      font-family: Arial;
      background-color: #505050;
      color: #FFFFFF;
      border: 1px solid black;
      border-top-color: #909090;
      border-left-color: #909090;
      border-right-color: #303030;
      border-bottom-color: #303030;
    }

    .dataitem {
      font-size: 8pt;
      font-family: Arial;
      background-color: #C0C0C0;
      color: #000000;
      border: 1px solid black;
      border-top-color: #CFCFCF;
      border-left-color: #CFCFCF;
      border-right-color: #505050;
      border-bottom-color: #505050;
    }
  </style>
</head>

<body onload="fnInit()">
  <h1>runtimeStyle Object Sample</h1>
  <div id="oScratch" style="border: 5px solid #101010; background-color: #CFCFCF; color: #000000; font-size: 12pt; font-family: Arial;">
    This sample demonstrates the use of the <strong>runtimeStyle</strong> object.
    The <strong>runtimeStyle</strong> object allows authors to use a particular style to override an existing style specified inline or in a style sheet.
    <p>In this sample, you can select different values to be set on the <strong>runtimeStyle</strong> object for the preconfigured properties used for this paragraph.
    When you select a new value, notice that the values for the <strong>runtimeStyle</strong> and <strong>currentStyle</strong> objects change for that property, but 
    the <strong>style</strong> object does not.
    When the value is cleared (select 'CLEAR' from the drop-down menu) from the <strong>runtimeStyle</strong> object, the property value reverts to the <strong>style</strong> 
    value, and the <strong>currentStyle</strong> value reflects this.</p>
  </div>
  <table id="oData">
    <tr>
      <td class="datahead">CSS Property</td>
      <td class="datahead">style</td>
      <td class="datahead">runtimeStyle</td>
      <td class="datahead">currentStyle</td>
      <td class="datahead"><strong>Select a Value</strong></td>
    </tr>
    <tr>
      <td class="dataitem">backgroundColor</td>
      <td class="dataitem"></td>
      <td class="dataitem"></td>
      <td class="dataitem"></td>
      <td class="dataitem">
        <select class="dataitem" onchange="fnChangeStyle('backgroundColor',this.options(this.selectedIndex).text)">
          <option>Indigo</option>
          <option>MistyRose</option>
          <option>MediumOrchid</option>
          <option>Pink</option>
          <option>Yellow</option>
          <option>CLEAR THIS RUNTIME STYLE</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="dataitem">borderColor</td>
      <td class="dataitem"></td>
      <td class="dataitem"></td>
      <td class="dataitem"></td>
      <td class="dataitem">
        <select class="dataitem" onchange="fnChangeStyle('borderColor',this.options(this.selectedIndex).text)">
          <option>Red</option>
          <option>Green</option>
          <option>Blue</option>
          <option>Yellow</option>
          <option>CLEAR THIS RUNTIME STYLE</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="dataitem">color</td>
      <td class="dataitem"></td>
      <td class="dataitem"></td>
      <td class="dataitem"></td>
      <td class="dataitem">
        <select class="dataitem" onchange="fnChangeStyle('color',this.options(this.selectedIndex).text)">
          <option>Red</option>
          <option>White</option>
          <option>Blue</option>
          <option>Yellow</option>
          <option>Silver</option>
          <option>Gold</option>
          <option>CLEAR THIS RUNTIME STYLE</option>
        </select>
      </td>
    </tr>
  </table>
  <script>
    function fnSetData() {
      var oData = document.getElementById('oData');
      for (var i = 1; i < oData.rows.length; i++) {
        var oWorkRow = oData.rows(i);
        oWorkRow.cells(1).innerText = eval("oScratch.style." + oWorkRow.cells(0).innerText);
        oWorkRow.cells(2).innerText = eval("oScratch.runtimeStyle." + oWorkRow.cells(0).innerText);
        oWorkRow.cells(3).innerText = eval("oScratch.currentStyle." + oWorkRow.cells(0).innerText);
      }
    }

    function fnChangeStyle(oStyle, sValue) {
      if (sValue.indexOf("CLEAR") > -1) {
        sValue = "";
      }
      eval("oScratch.runtimeStyle." + oStyle + "='" + sValue + "'");
      fnSetData();
    }

    function fnInit() {
      fnSetData();
    }
  </script>
</body>
</html>

See also

currentStyle

 

 

Anzeigen:
© 2014 Microsoft