从表中删除`border`属性不会删除边框

Question

为什么在执行removeAttr("border")时不删除边框（删除属性，但样式仍然存在）？

  

演示

$("#button1").on("click", function() {
  $("table").removeAttr("border");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tbody>
    <tr>
      <td>Hello</td>
      <td>World</td>
    </tr>
  </tbody>
</table>

<table>
  <tbody>
    <tr>
      <td>Not</td>
      <td>Initially</td>
      <td>Bordered</td>
    </tr>
  </tbody>
</table>

<input type="button" id="button1" value="Click to remove border via JavaScript">

我在Chrome和Chromium上重现了这一点。

Answer 1

您不必担心元素本身的border属性。

每个浏览器都附带一个＆＃39;默认样式表`，它将为常见的HTML元素配置基本表示。表是需要由站点设置样式以覆盖此基本样式的那些元素之一＆＃34;来自浏览器。浏览器实现此目的是为了提高网站的默认可读性，但它还引入了一个设备，Web开发人员在生成自己的样式表时必须注意这些设备。

设置以下规则：

table {
  border: none;
  border-spacing: 0;
  border-collapse: collapse;
}

将为您解决此问题。

jQuery可以删除该属性，但是当它被删除而不是更新时，它不会触发重绘元素。由于默认CSS上没有重写样式元素，因此保留了初始样式。

设置属性后，您可以随时克隆并重新应用（或者只是通过类似$('table').appendTo($('table').parent());之类的东西重新插入元素，以查看所需的行为。

---

编辑：

恭喜，您发现了Chrome错误

CSS渲染器即使在被删除后仍然尊重border属性。它不应该。其他浏览器在运行注释中提供的小提琴时，将适当地删除元素上的边框。

Chrome中的

然而！ 您会注意到这个带有设置边框属性的小傻瓜挂在桌面上：

请注意 table[Attributes Style] 空选择器

Chrome正在渲染此表，好像它是以这种方式在您的HTML中编写的：<table border></table>尽管没有反映DOM中的信息。

您一定要将此内容提交至 Chromium Issues List

请查看Ismael Miguel的评论，以获取进一步说明，并在此处复制

  

我能想到的是Chrome有一个与处理有关的错误   border属性（不推荐使用，html5中不支持）。   这可能是因为border属性没有链接到   整体 CSS样式。一个例子是价值属性。当你跑步   element.value = 5 ;, value属性将保持不变，但何时   你把value =＆＃34; 6＆＃34 ;,运行element.value将返回6.这个   关系可能会被破坏：使用border属性设置   颜色和边框尺寸。删除属性后，会删除   大小。

恭喜！

Answer 2

你应该使用

.attr("border", "")

以下是jsFiddle

的示例

Answer 3

默认情况下，某些浏览器中的表格有边框，因此您可能希望将边框设置为0。

Answer 4

$("table").attr("border", "0");

会做的伎俩