How to add an attribute with JS

**Frank S** · Sep 11, 2012 08:17

Hi,

I have a website in HTML5 that needs to validate. It uses an iframe, which is valid, but the frameborder attribute is not. And the CSS border property doesn't work. See for yourself:

HTML Code:

<!DOCTYPE HTML>
<html>
<head>
     <title>Demo</title>
     <meta charset="utf-8" />
<style type="text/css">
#contentContainer {
    height: 200px;
    width: 200px;
}
#I-frame {
    height: 100%;
    width: 100%;
    border: 0; /* doesn't work */
}
</style>
</head>
<body>
    <div id="contentContainer">
        <iframe name="I-frame" id="I-frame" src="introduction.html">
        </iframe>
    </div>
</body>
</html>

Can I insert the attribute frameborder="0" with javascript? If so, how? I've been fiddling with this method for a couple of hours, but have not succeeded so far. The full(y adjusted) HTML + JS code would be appreciated, to save discussion time.

Thanks in advance.

**Frank S** · Sep 11, 2012 11:56

I tried some more things and came up with this:

HTML Code:

<!DOCTYPE HTML>
<html>
<head>
     <title>Demo</title>
     <meta charset="utf-8" />
<style type="text/css">
#contentContainer {
    height: 200px;
    width: 200px;
}
#I-frame {
    height: 100%;
    width: 100%;
    border: 0; /* doesn't work in IE7/8*/
}
</style>
</head>
<body>
    <div id="contentContainer">
        <iframe name="I-frame" id="I-frame" src="introduction.html"></iframe>
    </div>
    <script>
    document.getElementById("I-frame").setAttribute("frameborder", "0");
    </script><!-- doesn't work in IE7/8 -->
</body>
</html>

But this doesn't work in IE7/8. Does anyone know how it will?

**felgall** · Sep 11, 2012 14:37

Just because the validator can't check the attributes that are added via JavaScript doesn't mean that they are valid when added that way. If the attribute is invalid when in the HTML in the first place then it is still invalid when added from JavaScript. The only difference isa that by adding it via JavaScript you are lying to the validator about what the HTML contains.

**Jeff Mott** · Sep 11, 2012 15:19

I tried your code in Chrome and IE9, and it works correctly. But in IE8, however, the frame border still shows. In order to support IE8, it would seem, you'll have to use the attribute. If the validator balks, remember that the validator is a tool to help you find errors. If you know that the frameborder attribute is intentional and not an error, then feel free to ignore that message from the validator.

User Tag List

Thread: How to add an attribute with JS

Thread Tools

Display

How to add an attribute with JS

How to get setAttribute to work in IE7/8

Bookmarks

Bookmarks

Posting Permissions