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

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > MozOutlineOffset

MozOutlineOffset style property

Browser support:


	3.6

Sets or retrieves the amount of space between the outline and the border or the edge of the element.

Deprecated and the support for it has been removed in Firefox 3.6. Use the widely supported outlineOffset property instead.

Syntax:

object.MozOutlineOffset;

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

This property is read/write.

CSS page for this property: -moz-outline-offset

Possible values:

The type of this property is string.

One of the following values:

inherit

Takes the value of this property from the computed style of the parent element.

width in length

The width of the space in length units. For the supported length units, see the length page.

Default: 0.

Example HTML code 1:

This example illustrates the use of the -moz-outline-offset property:

<head>
    <style>
        .example {
            -moz-outline-width: 2px;
            -moz-outline-style: solid;
            -moz-outline-color: blue;
            border: 1px solid black;
            width: 200px;
        }
        .offset5px {
            -moz-outline-offset: 5px;
        }
        .offset20px {
            -moz-outline-offset: 20px;
        }
    </style>
</head>
<body>
    <div class="example offset5px">-moz-outline-offset: 5px</div>
    <br /><br /><br />
    <div class="example offset20px">-moz-outline-offset: 20px</div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the MozOutlineOffset property in JavaScript:

<head>
    <style>
        #myDiv {
            -moz-outline-width: 2px;
            -moz-outline-style: solid;
            -moz-outline-color: blue;
            -moz-outline-offset: 4px;
            border: 1px solid black;
            width: 200px;
        }
    </style>
    <script type="text/javascript">
        function ChangeOutlineOffset (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var offset = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");

            if ('MozOutlineOffset' in div.style) {
                div.style.MozOutlineOffset = offset + "px";
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv" >Change outline offset</div>

    <br /><br /><br />

    <select onchange="ChangeOutlineOffset (this);" size="8">
        <option />1
        <option />2
        <option selected="selected" />4
        <option />6
        <option />8
        <option />10
        <option />15
        <option />25
    </select>
</body>