rule object

Represents a style within a style sheet that consists of a selector and one or more declarations.

Members

The rule object has these types of members:

Properties

The rule object has these properties.

PropertyAccess typeDescription

constructor

Returns a reference to the constructor of an object.

cssText

Read/write

Sets or retrieves the persisted representation of the style rule.

parentRule

Retrieves the containing rule, if the current rule is contained inside another rule.

parentStyleSheet

Retrieves the style sheet that contains the current rule.

readOnly

Retrieves whether the rule or style sheet is defined on the document or is imported.

selectorText

Retrieves a string that identifies which elements the corresponding style sheet rule applies to.

type

Retrieves the type of the rule.

 

Standards information

There are no standards that apply here.

Remarks

The rule object defines a set of Cascading Style Sheets (CSS) attributes applied to a set of HTML elements. For example, a rule consisting of the selector h1 and the declaration font-family:Arial defines all h1 elements to render in the Arial font.

This object is available in script as of Microsoft Internet Explorer 5.

Examples

This example uses a rule object consisting of the selector h1 to define a single rule that changes the H1 headings in a document to red.

JavaScript
Copy 

<style>
    h1 { color: red; }
</style>

If the style sheet containing the preceding rule is the first style sheet in the document, the following code returns the rule object associated with the rule.

JavaScript
Copy 

<!DOCTYPE html>

<html>
<head>
  <title>rule Object</title>
  <style>
    h1 { color: red; }
  </style>
</head>
<body>
  <h1>The <strong>rule</strong> object.</h1>
  <script>
    var oRule = document.styleSheets[0].rules[0];
    console.log(oRule.selectorText + " { color: " + oRule.style["color"] + "; }")
  </script>
</body>
</html>

See also

rules

 

 

Show: