从表中删除“border`”属性不会删除边框
为什么在执行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上复制了这个。
回答 4
Stack Overflow用户
发布于 2014-11-26 23:35:32
您需要担心的不仅仅是元素本身的border属性。
每个浏览器都有一个“默认样式表”，它将为常见的HTML元素配置一个基本的表示形式。表格是那些需要由网站设置样式的元素之一，以便覆盖来自浏览器的这个“基本样式”。浏览器实现这一点是为了提高网站的默认可读性，但它也引入了一种设备，web开发人员在生成自己的样式表时必须注意这一点。
设置以下规则：
table {
border: none;
border-spacing: 0;
border-collapse: collapse;
}将为您解决此问题。
jQuery可以删除属性，但它不会在元素被删除而不是更新时触发元素的重绘。由于默认CSS上没有重写样式元素，因此保留初始样式。
在设置了属性之后，您总是可以克隆并重新应用(或者简单地通过像$('table').appendTo($('table').parent());这样愚蠢的东西重新插入元素，以查看所需的行为。
编辑：
恭喜，你发现了一个Chrome
即使在移除边框属性之后，CSS呈现器仍然遵守它。它不应该是。其他浏览器在运行注释中提供的小提琴时，将适当地删除元素上的边框。
在Chrome中，你会注意到这个小吸盘挂在你的桌子上，有一个设置的属性：
请注意此处的table[Attributes Style]空选择器
Chrome呈现这个表就好像它是以这种方式在你的HTML：<table border></table>中编写的，尽管它没有反映DOM中的信息。
你一定要把这个提交给
查看下面的Ismael Miguel的评论以获得进一步的解释，复制到这里
我能想到的是Chrome有一个与边框属性处理相关的bug (在html5中已被弃用，不受支持)。这可能是因为边框属性没有链接到whole CSS样式。value属性就是一个例子。当您运行element.value=5；时，value属性将保持不变，但当您将value=设置为“6”时，运行element.value将返回6。这种关系可能会被打破:使用属性，它将设置颜色和边框大小。移除该属性时，it 仅移除大小。
恭喜！
Stack Overflow用户
发布于 2014-11-26 23:48:33
Stack Overflow用户
发布于 2014-11-26 23:38:31
在某些浏览器中，表格默认具有边框，因此您可能希望将边框设置为0。
https://stackoverflow.com/questions/27152935
复制相似问题