How to add an attribute with JS

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:


<!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.

I tried some more things and came up with this:


<!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?

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.

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.