SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Remove inline styles from <table><tr><td>

    hi

    i want to remove the inline styles from <table><tr><td> inside the <div id="tt">

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    document.removeAttribute('style');
    </script>
    </head>
    <body>
    <div id="tt">
    <table>
          <tr style="PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; FONT-SIZE: 11px; VERTICAL-ALIGN: baseline; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px; border-image: initial">
                <td style="BACKGROUND-IMAGE: none; BORDER-BOTTOM: rgb(240,240,240) 1px solid; PADDING-BOTTOM: 1px; BORDER-RIGHT-WIDTH: 0px; BACKGROUND-COLOR: rgb(250,250,250); MARGIN: 0px; PADDING-LEFT: 6px; WIDTH: 77px; BACKGROUND-ATTACHMENT: scroll; PADDING-RIGHT: 6px; FONT: bold 12px/16px Arial; BACKGROUND-POSITION: 0px 0px; BORDER-TOP-WIDTH: 0px; COLOR: rgb(125,116,100); VERTICAL-ALIGN: top; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 1px; background-origin: initial; background-clip: initial; border-image: initial" class="ttl"><font color="#7d7464">2G Network</font></td>    
            </tr>
    </table>
    </div>
    </body>
    </html>
    vineet

  2. #2
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i tried this also
    Code:
    <script language="javascript">
    $("body").attr("style", "");
    </script>
    but doesnt works

    vineet

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    this also doesnt works

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $('#foo').removeAttr('style');
    </script>
    </head>
    <body>
    <div id="foo" style="font-family:Arial, Helvetica, sans-serif"></div>
    </body>
    </html>
    vineet

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by vinpkl View Post
    this also doesnt works

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $('#foo').removeAttr('style');
    </script>
    </head>
    <body>
    <div id="foo" style="font-family:Arial, Helvetica, sans-serif"></div>
    </body>
    </html>
    The reason why that doesn't work is that you are attempting to access and remove something that doesn't even exist yet.
    When the script runs, this is what the page looks like:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $('#foo').removeAttr('style');
    </script>
    Notice that nothing below the script exists yet. That part of the DOM (document object model) has not even been loaded yet.

    Place the jQuery code within a jQuery callback, and that will delay execution of the script until the DOM has loaded and is ready to be worked with.

    Code javascript:
    $(function () {
        $('#foo').removeAttr('style');
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi paul

    i tried your solution. but that also doesnt works. Am i again missing something ?

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        $('#foo').removeAttr('style');
    });
    </script>
    </head>
    
    <body>
    <div id="foo" style="font-family:Arial, Helvetica, sans-serif"></div>
    </body>
    </html>
    vineet

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by vinpkl View Post
    i tried your solution. but that also doesnt works. Am i again missing something ?
    It works for me. Are you still seeing it for example when you view the source?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi paul

    yes when i do the "view source" i can see the style attributes still exists

    check this below link
    http://wdpixels.com/banners/styl.html

    i m checking it in IE7 and firefox 10

    vineet

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by vinpkl View Post
    yes when i do the "view source" i can see the style attributes still exists
    Thank you for clarifying that, that is normal. What you see when you view the source is the code from the web server It is not possible for JavaScript to edit the contents of the HTML file.

    With Internet Explorer if you press F12 though, you can see the end result of what is rendered to the screen after the script has run, which you will find confirms that the script does remove those styles.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi paul

    thanks for clarification.

    One more question i would like to ask,
    What shoudl i do to remove all the styles those are present or applied to any <tag> like <table><tr><td> that are inside the div#f00

    http://wdpixels.com/banners/styl.html

    at present only the styles that are applied to div#foo are removed but not the styles of <table><tr><td>

    vineet

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by vinpkl View Post
    What shoudl i do to remove all the styles those are present or applied to any <tag> like <table><tr><td> that are inside the div#f00
    One way would be to search for all elements that have a style attribute, so that you can then remove that attribute.

    Code javascript:
    $('[style]', '#foo').removeAttr('style');

    or

    Code javascript:
    $('#foo [style]').removeAttr('style');

    The first example is the preferred syntax, as using a context selector provides slightly improved performance.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i applied it but its not working for me

    http://wdpixels.com/banners/styl2.html

    do i need to change something in that code

    or i have to replace [style] with [td]

    vineet

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by vinpkl View Post
    i applied it but its not working for me
    You have removed the jQuery wrapper, which delays execution of the code until after the DOM has been loaded and is ready to be worked with.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    sorry my mistake

    thanks a lot for your help

    everything is working fine now.

    vineet

  14. #14
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    one more question i have.

    In my php cms, If i want to remove all the "styles" from the content which gets added automatically while pasting content in the form.

    then what is the solution.

    vineet

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by vinpkl View Post
    In my php cms, If i want to remove all the "styles" from the content which gets added automatically while pasting content in the form.
    Our PHP forum might have a solution for you with that.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi paul

    yes i forgot you already said that

    Code:
    It is not possible for JavaScript to edit the contents of the HTML file.
    vineet


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
  •