jquery - 使用 jquery 删除外部 css 属性

Question

我有这样的html

<table>
 <tr>
  <td>date</td>
  <td>name</td>
 </tr>
 <tr>
  <td>aug</td>
  <td>tr</td>
 </tr>
</table>

这是 css 外部@media 查询(max-width:768px)

td{
 display:block
}

如何使用 jQuery 删除外部 css 中的 display: block？ 我试过了，但我认为它只适用于内联 css

$("td").css({"display":""});

我无法删除外部 css 中的 display: block，因为我需要在其他页面中使用它

我试图阅读这个 also但只移除显示器是最好的解决方案。谁能帮帮我？

Answer 1

如果您说要更改 display:block 样式的页面，没有任何可以将其与其他页面(如 id 或类)区分开来的特别内容。或者表格外的一些包装器等等，那么你不能只为那个页面指定样式。

您应该知道不能只是“删除”样式。您可以用其他样式覆盖它们。默认情况下，所有元素都设置了一堆样式。像td有display:table-cell;visibility:visible;opacity:1等。 block 元素有display:block等，看这里css initial values

所以你可以做的是为你想要更改的表设置一个特定的类，然后在 css 中写入

table:not(.myTable) td {
    display:block;
}

因此，display:block 样式将不会应用于所需的表格单元格，td 将保持默认样式，display:table-单元格

你也可以写(如果你不想改变你已经设置的样式)

table td {
     display:block;
}
table.myTable td {
      display:table-cell;
} 

或者有很多更改/覆盖 css 样式的可能性(使用 css 或 javascript 等)，但您不能只是“删除”样式。正如我之前所说，每个 html 元素都为每个属性设置了初始样式。

使用 CSS 查看代码段

td {
	display:block;
	color:red;
}
table.myTable td {
	display:table-cell;
	color:blue
}

<!-- Table with td display:block-->
<table>
<tr>
<td>aa</td>
<td>bb</td>
</tr>
</table>
<!-- Table with td display:table-cell-->
<table class="myTable">
<tr>
<td>aa</td>
<td>bb</td>
</tr>
</table>

用 JQ 覆盖属性

$("td").css({
  "display": "table-cell",
	"color":"blue"
})

td {
  display: block;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Table with td display:block-->
<table>
  <tr>
    <td>aa</td>
    <td>bb</td>
  </tr>
</table>