0

こんにちは、私はこのような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%;" にする必要があります。

ありがとう！！

4

2 に答える 2

0

直接スタイル要素を使用するのではなく、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%";
}
于 2013-06-04T21:56:35.700 に答える
0

JQUERY スクリプトを使用するとどうなりますか? デモhttp://jsfiddle.net/MGRcA/2/

Jクエリ

$(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>
于 2013-06-05T01:19:44.043 に答える