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

Posted 2023-03-06

技术标签:

【中文标题】从表格中删除 `border` 属性不会删除边框【英文标题】：Removing `border` attribute from table doesn't remove the border 【发布时间】：2015-01-25 00:06:16 【问题描述】：

为什么在做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 上复制了这个。

【问题讨论】：

这是因为没有任何属性或用户 css 样式的默认表将占用用户代理样式，即浏览器样式。创建一个未装饰的简单表，看看会发生什么。而不是删除边框现在做一个$("table").attr("border", "0");然后看看。 @abhitalks 不，默认表没有任何边框，除非添加了border="1"（参见第一个表）。第二个表格没有任何边框。小提琴jsfiddle.net/Lqj2qcjs @abhitalks attr("border", "0") 解决了这个问题，但它没有解释为什么 removeAttr 不能正常工作。 【参考方案1】：

您需要担心的不仅仅是元素本身的border 属性。

每个浏览器都带有一个“默认样式表”，它将为常见的 html 元素配置基本表示。表格是需要网站设置样式以便从浏览器覆盖此“基本样式”的元素之一。浏览器实现这一点是为了提高网站的默认可读性，但它也引入了一种设备，Web 开发人员在生成自己的样式表时必须注意这一点。

设置以下规则：

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

将为您解决这个问题。

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

设置属性后，您始终可以克隆并重新应用（或简单地通过 $('table').appendTo($('table').parent()); 之类的傻事重新插入元素以查看所需的行为。

编辑：

恭喜，您发现了一个 Chrome 错误

CSS 渲染器仍然尊重边框属性，即使它已被删除。不应该。其他浏览器在运行 cmets 中提供的 fiddle 时，会适当地移除元素上的边框。

但是！在 Chrome 中，您会注意到这个小傻瓜挂在您的桌子上，并设置了边框属性：

注意 table[Attributes Style] 此处为空选择器

Chrome 正在呈现此表，就好像它是在您的 HTML 中这样编写的：<table border></table> 尽管这并未反映 DOM 中的信息。

您绝对应该将此提交给 Chromium Issues List

查看下面 Ismael Miguel 的评论以获得进一步的解释，复制到这里

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

恭喜！

【讨论】：

那么为什么第二个表格没有任何默认边框呢？ @BoltClock – 检查评论的第二部分。第二个表上没有任何边框，因为他最初在元素上将其设置为border=0（隐式）。当他通过 jQuery 删除该属性时，表格已经呈现无边框。删除属性本身不会像添加 CSS 规则那样触发元素的重绘。那么jsfiddle.net/Lqj2qcjs/3 呢？我最初将边框设置为 0，然后通过 jquery 将其删除，但还是有边框大声笑 @Huangism - 哇，这对我来说是新的。似乎边框属性的存在足以触发呈现边框。我会用我在这里看到的内容更新我的答案。 @JoshBurgess 我能想到的是 Chrome 有一个与处理 border 属性相关的错误（不推荐使用，在 html5 中不支持）。这可能是因为border 属性未链接到整个 CSS 样式。一个例子是value 属性。当你运行element.value=5; 时，value 属性将保持不变，但是当你放置value="6" 时，运行element.value 将返回6。这种关系可能会被打破：使用border 属性，它设置颜色和边框大小。删除属性时，它仅删除大小。【参考方案2】：