从表中删除`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你必须担心的元素本身的属性.

每个浏览器都附带一个"默认样式表",它将为常见的HTML元素配置基本表示.表是需要由站点设置样式以便从浏览器覆盖此"基本样式"的那些元素之一.浏览器实现此目的是为了提高网站的默认可读性,但它还引入了一个设备,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问题列表

请查看下面的Ismael Miguel的评论,以获得进一步的解释,复制在此处

我能想到的是Chrome有一个与border属性处理有关的bug(在html5中不推荐使用,不支持).这可能是因为border属性未链接到 整个 CSS样式.一个例子是价值属性.当你运行element.value = 5;时,value属性将保持不变,但当你输入value ="6"时,运行element.value将返回6.这种关系可能会被破坏:使用border属性设置颜色和边框大小.删除属性时,它仅删除大小.

恭喜!