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

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

addImport method (styleSheet)

Browser support:

Imports an external style file into the current styleSheet object.

In other words, the addImport method inserts an @import rule into the current styleSheet object. The imports collection represents the imported style sheets for a styleSheet object in Internet Explorer. The addImport method creates a new styleSheet object and inserts it into the imports collection of the current styleSheet object.

To remove a styleSheet object from the imports collection, use the removeImport method.

Use the insertRule method to insert a rule into a styleSheet object in Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9.

Syntax:

object.addImport (URL [, positionIndex]);

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

Parameters:

URL

Required. String that specifies the location of the style file to import.

positionIndex

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

Return value:

Returns the index of the newly added stylesheet in the imports collection. This value is a zero-based integer.

Example HTML code 1:

This example illustrates the use of the addImport method:

Code

style.css

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

                // the empty style sheet
            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
            
            if (sheet.insertRule) { // all browsers, except IE before version 9
                sheet.insertRule ("@import url('style.css');", 0);
            }
            else {  // Internet Explorer  before version 9
                if (sheet.addImport) {
                    sheet.addImport ("style.css");
                }
            }
        }
    </script>
</head>
<body>
    <button onclick="ImportStyleFile ();">Import a style file</button>
</body>