In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > methods > addPageRule (styleSheet)

addPageRule method (styleSheet)

Browser support:

Adds a new page rule to the current styleSheet object.

The pages collection represents the page rules for a styleSheet object in Internet Explorer. The addPageRule method creates a new page object and inserts it into the pages collection of the current styleSheet object.

Note: The addPageRule method is not implemented and raises an exception!

If you want to insert a page rule into a styleSheet object, use the insertRule method. It is supported in all browsers except in Internet Explorer before version 9. Unfortunately, the calling the insertRule method for a page rule raises an exception in Firefox and Safari, it only works in Opera, Google Chrome and Internet Explorer from version 9. See the example below for details.

Syntax:

object.addPageRule (selector, styleDef [, positionIndex]);

You can find the related objects in the Supported by objects section below.

Parameters:

selector

Required. String that specifies the selector for the new page rule object.

styleDef

Required. String that specifies the style definitions for the new page rule object.

positionIndex

Optional. Integer that specifies the position for the newly created page object in the pages collection. If this value is negative or greater than the length of the pages collection, the page is added to the end of the collection. Default is -1.

Return value:

The returned value is always -1.

Example HTML code 1:

This example illustrates the use of the addPageRule method:

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

                // the empty style sheet
            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
            
            try {
                if (sheet.insertRule) {     // all browsers, except IE before version 9
                        // raises an exception in Firefox and Safari
                    sheet.insertRule ("@page :first {margin: 8cm;}", 0);

                        // Opera, Google Chrome, Internet Explorer from version 9
                    alert (sheet.cssRules[0].cssText);
                }
                else {      // Internet Explorer  before version 9
                    if (sheet.addPageRule) {
                        sheet.addPageRule (":first", "margin: 8cm;", 0);    // raises an exception 
                    } 
                }
            }
            catch (e) {
                alert (e.message);
            }
        }
    </script>
</head>
<body>
    <button onclick="AddNewPageRule ();">Add a new page rule to a styleSheet</button>
</body>