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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > marginWidth (frame, iframe)

marginWidth property (frame, iframe)

Browser support:

Sets or retrieves the left and right margins for a frame element.

Syntax:

object.marginWidth;

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

This property is read/write.

HTML page for this property: marginWidth

Possible values:

String that sets or retrieves the width of the margin, with an integer optionally followed by a 'px' (pixel) unit designator. Negative values are not allowed.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the marginWidth attribute:

Code

frame.htm

<iframe src="frame.htm" width="250px" height="250px" marginwidth="200px"></iframe>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:#fbd8a4;">
    <h1>Contents of the frame</h1>
</body>
</html>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the marginWidth property:

Code

frame.htm

<head>
    <script type="text/javascript">
        function SetMarginWidth () {
            var input = document.getElementById ("myInput");
            var iframe = document.getElementById ("myFrame");
            iframe.marginWidth = input.value;

            // To solve the refresh problems
            // Internet Explorer
            iframe.src = iframe.src;
            // Firefox
            var nextElem = iframe.nextSibling;
            var paren = iframe.parentNode;
            paren.removeChild (iframe);
            paren.insertBefore (iframe, nextElem);
        }
    </script>
</head>
<body>
    <iframe id="myFrame" src="frame.htm" width="250px" height="210px" marginheight="140px"></iframe>
    <br />

    <input id="myInput" type="text" value="20" />
    <button onclick="SetMarginWidth ();">Set marginWidth!</button>
</body>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:#fbd8a4;">
    <h1>Contents of the frame</h1>
</body>
</html>