#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    8
    Rep Power
    0

    How to style td using javascript without using id and class..?


    Hi I am having HTML like this...

    Code:
    <table width="600"> 
    <tr> 
    <td> Text </td> 
    </tr> 
    <tr> 
    <td> <img src="demo.jpg" width="200" height="200"/> </td> </tr> 
    <tr> 
    <td style="font:arial;"> 
    <img src="demo.jpg" width="200" height="200"/> 
    </td> 
    </tr> 
    <tr> 
    <td style="font:arial;"> 
    <a href="#"> 
    <img src="demo.jpg" width="200" height="200"/> </a> 
    </td> 
    </tr> 
    </table>
    i am using the following function to add style="font-size:0%" in all the td's having images.

    Code:
    function change(input, output) { 
    var div = document.createElement("div"); 
    try { div.innerHTML = input; } 
    catch (e) { alert(e.message); return; } 
    var table = div.getElementsByTagName("table"), 
    tds = div.getElementsByTagName("td"), 
    tdsWithImages = Array.prototype.slice.call(tds).filter(function (td) { 
    return td.getElementsByTagName('img').length > 0 
    }); 
    tdsWithImages.map(function (td) { 
    td.style.fontSize = "0%"; 
    }); 
    output.value = div.innerHTML; 
    }
    The style attribute is overwritten. i.e style="font:arial;" will be overwrited to style="font-size:0%;" in all the td's having images.

    But it should be style="font:arial; font-size:0%;"

    Thanks!!
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    What problem are you actually trying to solve? Perhaps the one discussed here: That mysterious gap under images
    Images, Tables, and Mysterious Gaps

    Anyway, it's not actually being overwritten. The problem is "font:arial" is not valid, so browsers are ignoring it. The font shorthand property requires both a font-size and a font-family to be specified (the values for the other font-* properties and line-height are optional).
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo