SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2011
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    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.

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2011
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to get setAttribute to work in IE7/8

    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?

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,817
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,272
    Mentioned
    18 Post(s)
    Tagged
    0 Thread(s)
    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.
    "First make it work. Then make it better."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •