如何使用javascript样式td不使用id和类

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>

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

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属性被覆盖。即style="font:arial;"将被覆盖为style="font-size:0%;"

但它应该是style="font:arial;字体大小:0%;"

谢谢! !

Answer 1

我建议，而不是使用直接的样式元素和使用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%";
}

Answer 2

如何使用JQUERY脚本?演示http://jsfiddle.net/MGRcA/2/

<标题> JQUERY h1> 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>