如何在不使用 id 和 class 的情况下使用 javascript 设置 td 样式..？

Question

嗨，我有这样的 HTML...

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

我正在使用以下函数在所有 td 的图像中添加 style="font-size:0%"。

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;
}

样式属性被覆盖。 即样式=“字体：宋体；”将被覆盖为 style="font-size:0%;"在所有 td 中都有图像。

但应该是 style="font:arial; font-size:0%;"

谢谢！！

Answer 1

使用 JQUERY 脚本怎么样？演示http://jsfiddle.net/MGRcA/2/

JQUERY

$(document).ready(function() {
    $('td').find('img').map(function(){
        $(this).parent('td').css({'font-size':'0%', 'font-family':'arial'});
    });
});

HTML

<table width="600">
<tr>
  <td>
     Text
  </td>
</tr>
<tr>
  <td>
     <img src="demo.jpg" width="200" height="200"/>Text
  </td>
</tr>
<tr>
  <td style="font:arial;">
     <img src="demo.jpg" width="200" height="200"/>Text
  </td>
</tr>
<tr>
  <td style="font:arial;">
   <a href="#">
     <img src="demo.jpg" width="200" height="200"/>Text
   </a>
  </td>
</tr>
</table>

Answer 2

我建议不要使用直接样式元素并使用 javascript 来操作它，而是使用 css 类，这也是做事的正确方法，而不是内联样式。 我还建议您将字体样式移至另一个（或相同）类。

css:

.zero_font_size {
   font-size:0%
}

javascript：

var tds = document.getElementByTagName("td");
for (var i = 0; i < tds.length; i++) {
  tds[i].className = tds[i].className + "zero_font_size";
}

javascript ECMAScript5（新浏览器）

var tds = document.getElementByTagName("td");
tds.forEach(function(td) {
    td.className = tds.className + "zero_font_size";
});

或者如果你想使用内联样式：

var tds = document.getElementByTagName("td");
for (var i = 0; i < tds.length; i++) {
  tds[i].cssText = tds[i].cssText + ";font-size:0%";
}