JQUERY

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：arial;”将被覆盖到style =“font-size：0％;”在所有td中都有图像。

但它应该是style =“font：arial; font-size：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脚本怎么样？ DEMO 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>

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

2 个答案:

JQUERY

HTML