为什么在执行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上复制了这个。
发布于 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 仅移除大小。
恭喜!
发布于 2014-11-26 23:48:33
发布于 2014-11-26 23:38:31
在某些浏览器中,表格默认具有边框,因此您可能希望将边框设置为0。
https://stackoverflow.com/questions/27152935
复制相似问题