You are here: Reference > JavaScript > client-side > style handling > properties > type (rule objects)
type property (rule objects)
| 9 | ||||
Retrieves an integer value that identifies the type of the CSS rule represented by the current CSSRule object.
Note: The type property is supported in Internet Explorer from version 9.
Syntax:
You can find the related objects in the Supported by objects section below.
This property is read-only.
Possible values:
Integer that represents the type of the represented rule.
Predefined constants are available for the possible values of this property, in the scope of the CSSRule object (CSSRule.UNKNOWN_RULE).
For further details, see the page for the CSSRule object.
One of the following values (the value of a predefined constant appears in parentheses after the constant):
| The type of the represented rule is unknown. | |||||||
| The represented rule is a style rule. | |||||||
| The represented rule is a @charset rule. | |||||||
| The represented rule is an @import rule. | |||||||
| The represented rule is a @media rule. | |||||||
| The represented rule is a @font-face rule. | |||||||
| The represented rule is a @page rule. |
Default: this property has no default value.
Example HTML code 1:
This example illustrates the use of the type property:
|
|
||||
<head> <style id="myStyle"> button { background-color: cyan; border: solid 1px blue; } </style> <script type="text/javascript"> function GetRuleType () { var styleTag = document.getElementById ("myStyle"); // the style sheet in the style tag var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet; // the first rule var rules = sheet.cssRules ? sheet.cssRules : sheet.rules; var firstRule = rules[0]; if ('type' in firstRule) { // all browsers, except IE before version 9 switch (firstRule.type) { case CSSRule.UNKNOWN_RULE: alert ("The type of the represented rule is unknown."); break; case CSSRule.STYLE_RULE: alert ("The rule is a style rule."); break; case CSSRule.CHARSET_RULE: alert ("The rule is a @charset rule."); break; case CSSRule.IMPORT_RULE: alert ("The rule is a @import rule."); break; case CSSRule.MEDIA_RULE: alert ("The rule is a @media rule."); break; case CSSRule.FONT_FACE_RULE: alert ("The rule is a @font-face rule."); break; case CSSRule.PAGE_RULE: alert ("The rule is a @page rule."); break; } } else { // Internet Explorer before version 9 alert ("Your browser does not support this example!"); } } </script> </head> <body> <button onclick="GetRuleType ()">Get the type of the first rule!</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
Supported by objects:
CSSCharsetRule, CSSFontFaceRule, CSSImportRule, CSSMediaRule, CSSPageRule, CSSRule, CSSStyleRule, rule
Related pages:
User Contributed Comments