`.cssText`

Question

我有一个包含多行的表格，例如：

<table>
   <tr id="line1"><td>Line</td><td>1</td></tr>
   <tr id="line2"><td>Line</td><td>2</td></tr>
   <tr id="line3"><td>Line</td><td>3</td></tr>
</table>

现在，在javascript中（基于无线电输入字段），我想通过添加#line3来删除（例如）visibility:collapse，例如：

document.getElementById("line3").style = "visibility:collapse";

#line3的特别之处在于它有一个border-top：

<style>
   table {
      border-collapse: collapse;
   }
   #line3 {
     border-top:1px solid black;
   }
</style>

我的问题是：当我“折叠” #line3时，边框仍然存在，即使元素“不存在”也是如此。我猜这应该是由于表格样式中的border-collapse“继承”了先前tr元素上的border元素？我该如何解决该问题？

编辑：我想保留这样的javascript。当然，我可以删除/阅读样式元素，但是应该有其他方法来解决这个问题？！

Answer 1

您是否尝试过“显示：无”？


     document.getElementById("line3").style = "display: none";

或者，您可以尝试将border-top设置为0，以将其隐藏。


    document.getElementById("line3").style = "visibility:collapse; border-top: 0";

Answer 2

`.cssText`

您可以使用[style]编辑整个内联.cssText属性：

document.getElementById("line3").style.cssText = "visibility:collapse; border-top:0px";

这使您可以在一行中设置visibility和border属性（如果需要，还可以设置更多）。

演示

document.getElementById("line3").style.cssText = "visibility:collapse; border-top:0px";

table {
  border-collapse: collapse;
}

#line3 {
  border-top: 1px solid black;
}

<table>
  <tr id="line1">
    <td>Line</td>
    <td>1</td>
  </tr>
  <tr id="line2">
    <td>Line</td>
    <td>2</td>
  </tr>
  <tr id="line3">
    <td>Line</td>
    <td>3</td>
  </tr>
</table>

Answer 3

我当然可以删除/阅读样式元素

我认为这意味着您不想在更改行的可见性时弄混border-top属性，对吗？

在这种情况下，您似乎唯一的选择是使用display:none而不是visibility:collapse [1]，这很不幸，因为这样您的表可能会产生visibility:collapse的不稳定效果旨在防止。

[1] https://drafts.csswg.org/css-tables-3/#visibility-collapse-track-rendering并不十分清晰，但看起来像规范中规定了您不需要的行为。在可见性：崩溃的情况下，chrome和Firefox的行为略有不同。 https://jsfiddle.net/dgrogan/gLqo9s4w/2

let visible = 1;
toggle.onclick = function() {
  line3.style.visibility = visible ? "collapse" : "visible";
//line3.style.display = visible ? "none" : "table-row";
  visible = !visible;
}

   table {
     border-collapse: collapse;
   }

td {
  border: 1px solid lime;
}

   #line3 {
     border-top: 2px solid black;
   }

<table>
  <tr id="line1">
    <td>Line</td>
    <td>1</td>
  </tr>
  <tr id="line2">
    <td>Line</td>
    <td>2</td>
  </tr>
  <tr id="line3">
    <td>Line</td>
    <td>3</td>
  </tr>
</table>

<br><br>
<button id=toggle>toggle</button>
<P>
https://drafts.csswg.org/css-tables-3/#visibility-collapse-track-rendering
</P>

Answer 4

使用Jquery，您有几种解决方案：

$('#line1').hide();

//OR

$('#line1').css('visibility','collapse');

//OR

$('#line1').css('display','none');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
   <tr id="line1"><td>Line</td><td>1</td></tr>
   <tr id="line2"><td>Line</td><td>2</td></tr>
   <tr id="line3"><td>Line</td><td>3</td></tr>
</table>

您还可以直接将Javascript与getElementById属性一起使用：

document.getElementById("line1").style.display = "none";

或

document.getElementById("line1").style.visibility = "collapse";

HTML表：tr的边框折叠和可见性折叠

4 个答案:

`.cssText`

演示