草庐IT

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

coder 2023-08-01 原文

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

最佳答案

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

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

设置以下规则:

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

将为您解决这个问题。

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

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

编辑:

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

即使删除了 border 属性，CSS 渲染器仍然遵守它。不应该的。其他浏览器在运行注释中提供的 fiddle 时，将适本地删除元素上的边框。

但是!在 Chrome 中，您会注意到这个小傻瓜卡在您的 table 上，带有设置的边框属性:

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

Chrome 正在呈现此表，就好像它是在您的 HTML 中以这种方式编写的:<table border></table>尽管这并未反射(reflect) DOM 中的信息。

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

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

What I can think of is that Chrome has a bug related to the handling of the border attribute (which is deprecated, unsupported in html5). This might happen because the border attribute isn't linked to the whole CSS style. One example is the value property. When you run element.value=5;, the value attribute will remain the same, but when you put value="6", running element.value will return 6. This relationship might be broken: with the border attribute it sets the color AND the border size. When you remove the attribute, it removes the size only.

恭喜!

关于javascript - 从表中删除 `border` 属性不会删除边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27152935/

javascriptborderstrongcodejqueryhtmlcssgoogle-chrome

有关javascript - 从表中删除 `border` 属性不会删除边框的更多相关文章

  1. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  2. ruby-on-rails - 如果为空或不验证数值，则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  3. ruby - 我可以使用 Ruby 从 CSV 中删除列吗？ - 2

    查看Ruby的CSV库的文档，我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列，但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html

  4. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah

  5. ruby - Highline 询问方法不会使用同一行 - 2

    设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？ 最佳答案

  6. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  7. ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗？ - 2

    我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后，每个操作都应在S3上回滚。S3Object这可能吗？？ 最佳答案 虽然S3API具有批量删除功能，但它不支持事务，因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST)，因此每个上传操作都是通过一个独立的API调用完成的

  8. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  9. ruby - Nokogiri 剥离所有属性 - 2

    我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点？ 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者，如果您需要做一些更复杂的事情，有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

  10. ruby-on-rails - Rails 模型——非持久类成员或属性？ - 2

    对于Rails模型，是否可以/建议让一个类的成员不持久保存到数据库中？我想将用户最后选择的类型存储在session变量中。由于我无法从我的模型中设置session变量，我想将值存储在一个“虚拟”类成员中，该成员只是将值传递回Controller。你能有这样的类(class)成员吗？ 最佳答案 将非持久属性添加到Rails模型就像任何其他Ruby类一样:classUser扩展解释:在Ruby中，所有实例变量都是私有(private)的，不需要在赋值前定义。attr_accessor创建一个setter和getter方法:classUs

随机推荐