jjzjj

javascript - 是否可以让 Chrome 返回 CSS "content"属性的原始值？

coder 2024-07-25 原文

考虑以下 JavaScript、CSS 和 HTML 代码:

console.log(getComputedStyle(document.querySelector('p'), '::after').getPropertyValue('content'));
p::after {
    content: "Hello" attr(data-after);
}
<p data-after=" World"></p>

Firefox 和 IE11 都返回 CSS 中定义的原始值:"Hello" attr(data-after) ，这正是我所需要的。

但是 Chrome 返回 "Hello World" , 解析后的值。

当我使用 Chrome DevTools 检查元素时，我可以看到它在“样式”面板中显示以下信息:

p::after {
    content: "Hello" attr(data-after);
}

所以看起来 Chrome 仍然有能力知道原始值。

是否有任何 JavaScript 解决方案可以使 Chrome 像 Firefox 和 IE11 一样返回 CSS 中定义的原始值？ Chrome 独有的方法也可以，只要能在 JavaScript 中使用即可。

情况说明

针对某位成员(member)提出的原因问题，情况如下:

我正在尝试为 CSS 创建一个“polyfill”speak: never关于伪元素。 speak property目前没有任何浏览器支持。

CSS 伪元素可以被屏幕阅读器读取，目前无法轻易地从屏幕阅读器中隐藏它们。解决该问题的常用方法是使用 HTML 代码，例如 <span aria-hidden="true">...</span>而不是方便的 CSS 伪元素和 speak: never ，在我看来，这种方法既不方便又令人失望。

所以这个 polyfill 主要是关于网络可访问性的。

此 polyfill 的工作原理将要求 CSS 开发人员编写一些额外的 CSS 代码作为指示器，例如 attr(speak-never) :

p::after {
    content: "please make me inaudible" attr(speak-never);
    }

然后在 JavaScript 中，polyfill 遍历页面上的每个元素并检查其伪元素是否为 ::before和 ::after CSS 的值 content属性包含 attr(speak-never) .如果找到该指示符字符串，则 polyfill 会修复伪元素(通过以编程方式添加自定义元素 <before aria-hidden="true">...</before> 和 <after aria-hidden="true">...</after>)。

现在的问题是 Chrome 无法返回所说的 attr(speak-never)在 JavaScript 中。尽管 polyfill 也可以通过要求 CSS 开发人员再添加一个指示符来工作，例如 --speak: never对于 Chrome，polyfill 最好让 CSS 开发人员的工作尽可能简单，并且不需要额外的 --speak: never指标。

这就是创建此问题的原因。

更新

我决定使用 counter-reset: speak-never作为指标，因为所有浏览器都可以在 JavaScript 中读取它。

最佳答案

不确定添加类似 attr(speak-never) 的东西是否比通过 HTML 标记更干净...

但是这个问题指向一件有趣的事情:Chrome 已经开始实现 CSSTypedOM，我们应该能够使用它来找到原始值集，如所演示的 in this answer .

但是，针对伪元素，计划会有一个 PseudoElement interface ，以及对 Element 的扩展，以便我们可以调用 Element.pseudo(::type) 以定位其伪元素。但是这部分规范还没有被 Chrome 实现，所以目前在 Chrome 中实际上没有办法访问伪元素的 TypedValues。

因此，这让我们只能自己解析样式表，以及使 w3c 开发真正的 API 的所有注意事项:无法访问跨域样式表，无法直接了解规则是否在元素上处于事件状态，或者某个元素是否处于事件状态另一个更重要等等......

关于javascript - 是否可以让 Chrome 返回 CSS "content"属性的原始值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55204376/

javascriptampcodesectionChromecssgoogle-chromepseudo-element

有关javascript - 是否可以让 Chrome 返回 CSS "content"属性的原始值？的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  3. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  4. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  5. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  6. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  7. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2

    为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

  8. 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

  9. 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

  10. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

随机推荐