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.


object.addPageRule (selector, styleDef [, positionIndex]);
You can find the related objects in the Supported by objects section below.


Required. String that specifies the selector for the new page rule object.
Required. String that specifies the style definitions for the new page rule object.
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:
    <style id="myStyle">
    <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);
    <button onclick="AddNewPageRule ();">Add a new page rule to a styleSheet</button>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content