javascript - 如何删除以 javascript 为目标的 css 元素

Question

我正在尝试从某个页面中删除一些 css，因为我在我的 drupal 站点中使用了 Google Org Chart，而我的一些 css 覆盖了已经存在的内容。这是下面的代码。

我要删除的内容:

.MainBlock table td {
   border-right: 1px solid #045273;
   border-bottom: 1px solid #045273;
   vertical-align: top;
}

我尝试了很多方法，但没有任何效果。我没有删除的所有尝试都在下面。

<script type="text/javascript">
  if (document.URL.indexOf("/node/7794/draft") >= 0) {
  //$('.MainBlock').find("table tr").css("border-bottom","");
  //$(".MainBlock table td").css("border-bottom":"12px Solid #000");
  $(".MainBlock table td").css({ 'border-bottom' : ''});
}

我需要它来忽略那一行 css，因为它在其他页面上需要。那，并将其设置为 0 或没有任何破坏它。

Answer 1

您可以使用0 或none 来移除边框，空字符串不起作用。

$( '.MainBlock table td' ).css( { 'border-bottom' : 0 } );

.MainBlock table td {
   border-right: 1px solid #045273;
   border-bottom: 1px solid #045273;
   vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="MainBlock">
  <table>
    <tr>
      <td>Content</td>
      <td>Content</td>
    </tr>
  </table>
</div>

如果可以的话，最终我会坚持使用 CSS。确保在原始选择器之后放置相同的选择器，它将覆盖它。

/* original rule */
.MainBlock table td {
   border-right: 1px solid #045273;
   border-bottom: 1px solid #045273;
   vertical-align: top;
}

/* sometime later, maybe in a different file */
.MainBlock table td {
  border-bottom: 0;
} 

另一种方法是增加选择器的特异性。因为它是一个 Drupal 站点，所以应该有一个页面 ID 可以 Hook ，例如:

.page-node-2793683 .MainBlock table td {
  border-bottom: 0;
}

编辑

根据说明和@EF it:

要防止将样式应用于特定页面，您可以使用 :not() 伪选择器。

div:not(.page-node-2793683) .MainBlock table td {
   border-right: 1px solid #045273;
   border-bottom: 1px solid #045273;
   vertical-align: top;
}

<div class="page-node-2793683">

  <div class="MainBlock">
    <table>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </table>
  </div>
  
</div>

<div class="page-node-10">

  <div class="MainBlock">
    <table>
      <tr>
        <td>Content</td>
        <td>Content</td>
      </tr>
    </table>
  </div>
  
</div>

注意:虽然不是必需的，但在没有选择器的情况下使用 not() may not work reliably .上面的示例可能需要修改以满足您的需求。