为了账号安全,请及时绑定邮箱和手机立即绑定

如何使用JavaScript访问CSS生成的内容

如何使用JavaScript访问CSS生成的内容

慕斯709654 2019-10-21 10:59:41
我使用CSS counter和content属性生成标题和图的编号:img.figure:after {  counter-increment: figure;  content: "Fig. " counter(section) "." counter(figure);}该图片(假定使用适当的浏览器)在任何图像之后均带有漂亮的标签“图1.1”,“图1.2”,依此类推。问题:如何从Javascript访问此内容?现在的问题是在该双重我想访问任一特定计数器(在一定的DOM节点)的当前值或所述CSS生成的内容的值(在某一DOM节点)或,很明显,这两个信息。背景:我想在链接后面附加指向数字的适当数字,如下所示:<a href="#fig1">see here</h>------------------------^ " (Fig 1.1)" inserted via JS据我所看到的,把它归结为这个问题:我可以访问content或counter-increment通过getComputedStyle:var fig_content = window.getComputedStyle(                    document.getElementById('fig-a'),                    ':after').content;但是,这不是实时值,而是样式表中声明的值。我找不到任何接口来访问真实的实时价值。在计数器的情况下,甚至没有真正的CSS属性可查询。编辑:深入研究DOM规范,我发现了DOM Level 2样式计数器界面。这似乎是:a)允许访问当前计数器值,以及b)至少在Firefox中实现。但是,我不知道如何使用它。在此Firebug输出之后,我当前的方法不幸死了:// should return a DOM 2 Counter interface implementation...window.getComputedStyle(fig_a_element, ':after')      .getPropertyCSSValue("counter-increment")[0]      .getCounterValue();[Exception... "Modifications are not allowed for this document" code: "7" nsresult: "0x80530007 (NS_ERROR_DOM_NO_MODIFICATION_ALLOWED_ERR)" location: "http://localhost/countertest.html Line: 71"]任何想法,如何将其变为现实将受到高度赞赏。编辑2:显然我误解了DOM级别2样式的Counter对象。它也没有返回当前计数器值的属性。这使得上述方法无效。新方法:是否可以通过DOM读取伪元素的内容?也就是说,我可以选择伪元素(treeWalker想到)然后得到它nodeValue吗?(如果您现在开始输入'jQuery',请重新考虑将其更改为'Sizzle' ...)
查看完整描述

3 回答

  • 3 回答
  • 0 关注
  • 368 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信