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

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

allowTransparency property (frame, iframe)

Browser support:


9

Sets or retrieves whether a frame element (frame or iframe) can be transparent.

The support for the allowTransparency property has been removed in Internet Explorer 9.

Transparency is allowed by default for linked documents in all commonly used browsers, except in Internet Explorer before version 9. If the allowTransparency property is not specified, the linked document cannot be transparent. If the allowTransparency property is set, the linked document can be transparent and it will be transparent by default (see backgroundColor).

Syntax:

object.allowTransparency;

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

This property is read/write.

HTML page for this property: ALLOWTRANSPARENCY

Possible values:

Boolean that indicates whether the element can be transparent.

One of the following values:

false

Default. Object cannot be transparent.

true

Object is transparent.

Default: false.

Example HTML code 1:

This example illustrates the use of the ALLOWTRANSPARENCY attribute:

Code

transparent.htm

<body style="background:#EFEFFF">
    <iframe src="transparent.htm" allowtransparency="allowtransparency">
    </iframe>
</body>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:transparent;">
    <div>Division object</div>
    <button>Button object</button>
    <font>Font object</font>
    Normal TextNode
</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 allowTransparency property:

Code

transparent.htm

<head>
    <script type="text/javascript">
        function ToggleTrans () {
            var frame = document.getElementById ("myFrame");
            if ('allowTransparency' in frame) {
                frame.allowTransparency = !frame.allowTransparency;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body style="background:#EFEFFF">
    <!-- in the transparent.htm file must be set style="background-color: transparent" for the BODY element. 
            <body style="background-color: transparent">    -->

    <iframe id="myFrame" src="transparent.htm" allowtransparency="allowtransparency">
    </iframe>
    <button onclick="ToggleTrans ();">Change transparency!</button>
</body>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body style="background-color:transparent;">
    <div>Division object</div>
    <button>Button object</button>
    <font>Font object</font>
    Normal TextNode
</body>
</html>