You are here: Reference > JavaScript > client-side > style handling > objects > pages

pages collection

Browser support:
Represents a collection of all @page at-rules in a styleSheet object.
The rules in the collection are sorted in source code order.
Although the pages collection is supported, but the @page at-rule does not work in Internet Explorer before version 8.
Note: Page selectors are not supported in Internet Explorer. If a @page at-rule contains a selector, the rule is parsed as an unknown rule in Internet Explorer from version 8, so it does not get into the pages collection. In older versions, the pages collection contains all @page at-rules (but they do not work).
In Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9, use the cssRules collection to get the style rules and at-rules of a style sheet.

Syntax:

Properties that reference the object:
styleSheet.pages
The base interface, through which you can add new functionalities to the pages collection, is the StyleSheetPageList interface.

Possible members:

Properties:
length
Returns an integer that specifies the number of objects in the current collection.

This property is read-only.
Methods:
[index]
Returns an object from the current collection by index.

Parameters:

index
Required. Zero-based integer that specifies the position of the object to retrieve.

Return value:

Returns the page object at the specified position.
item (index)
Returns an object from the current collection by index.

Parameters:

index
Required. Zero-based integer that specifies the position of the object to retrieve.

Return value:

Returns the page object at the specified position.

Example HTML code 1:

This example illustrates the use of the pages collection:
<head>
    <style id="myStyle">
        @page :first {
            margin-left: 13cm;
            margin-right: 4cm;
        }
    </style> 

    <script type="text/javascript">
        function GetPageRule () {
            var styleTag = document.getElementById ("myStyle");

                // the style sheet in the style tag
            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;

            if (sheet.cssRules) { // all browsers, except IE before version 9
                    // the page rules are not in the cssRules collection
                    // in Firefox and Safari before version 5
                if (sheet.cssRules.length > 0) {
                    var pageRule = sheet.cssRules[0];
                    alert (pageRule.cssText);
                    return;
                }
            }
            else {  // Internet Explorer before version 9
                if (sheet.pages) {
                    var pageRule = sheet.pages[0];
                    alert (pageRule.selector + ":" + pageRule.pseudoClass);
                    return;
                }
            }

                // Firefox, Safari before version 5
            alert ("Your browser does not support this example!");
        }
    </script> 
</head>
<body>
    <button onclick="GetPageRule ()">Get the page rule!</button>
</body>
Did you find this example helpful? yes no

External links:

User Contributed Comments

Post Content

Post Content