代码之家 › 专栏 › 技术社区 › Boldewyn

如何使用javascript访问css生成的内容

counter dom css javascript

Boldewyn · 技术社区 · 16 年前

我用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

据我所见,归根结底就是这个问题: 我能够接近 内容 或 counter-increment 通过 getComputedStyle :

var fig_content = window.getComputedStyle(
                    document.getElementById('fig-a'),
                    ':after').content;

但是,这不是居住值,但在样式表中声明的值。我找不到任何接口来访问 真实的 活值。对于计数器,甚至没有真正的css属性可供查询。

编辑: 通过对dom规范的深入研究,我发现 the DOM Level 2 Style Counter interface . 这似乎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 level 2样式的counter对象。它也没有返回当前计数器值的属性。这使得上述方法无效。

新方法:是否有可能通过dom读取伪元素的内容?也就是说,我可以选择伪元素吗( treeWalker 想到了)然后 nodeValue ?(如果你开始打字 “jQuery” 现在,请重新考虑把这个词改成 咝咝声 ……)

4 回复 | 直到 8 年前

BoltClock 13 年前

我找不到任何接口来访问真实值。[柜台的]

是啊。我想没有。对不起的。

我唯一能想到的就是要把每一个元素(包括 :before / :after pseudo elements)在文档中的元素之前,查找计数器并将其相加。

显然那很可怕。如果你想复制浏览器自己的 counter 机制-只需用自己的基于脚本的计数器替换它可能会更容易(而且更兼容,因为ie<=7缺少计数器/内容支持)。大致如下:

<a href="#prettypicture">this</a>

<div class="counter level=0">...</div>
<img id="prettypicture" class="counter level=1" alt="ooo, pretty"/>

window.onload= function() {
    var counters= Node_getElementsByClassName(document.body, 'counter');
    var indices= [];
    for (var counteri= 0; counteri<counters.length; counteri++) {
        var counter= counters[counteri];

        var level= Element_getClassArgument(counter, 'level');
        while (indices.length<=level)
            indices.push(0);
        indices[level]++;
        indices= indices.slice(level+1);
        var text= document.createTextNode('Figure '+indices.join('.'));
        counter.parentNode.insertBefore(text, counter.nextSibling);

        if (counter.id!=='') {
            for (var linki= document.links.length; linki-->0;) {
                var link= document.links[i];
                if (
                    link.hostname===location.hostname && link.pathname===location.pathname &&
                    link.search===location.search && link.hash==='#'+counter.id
                ) {
                    var text= document.createTextNode('('+indices.join('.')+')');
                    link.parentNode.insertBefore(text, link.nextSibling);
                }
            }
        }
    }
};

Luca Filosofi 11 年前

阅读此:

http://www.w3.org/TR/CSS2/generate.html#propdef-content

生成的内容不会更改文档树。尤其是没有反馈到文档语言处理器(例如,用于重新处理)。

https://developer.mozilla.org/en/CSS/Getting_Started/Content

样式表中指定的内容不会成为dom的一部分。

所以出于这个原因 getComputedStyle 在这种情况下不起作用 ;我想唯一的办法,就是表演经典 循环通过 就像下面有人描述的那样!

Svante Svenson 16 年前

我将把你的css移植到javascript上,这可以让你得到图片标题,也可以让你获得更大的浏览器覆盖率。使用jquery,您可以这样做:

$(function() {
  var section = 0;
  $(".section").each(function() {
    section++;
    var figure = 0;
    $(this).find("img.figure").each(function() {
      figure++;
      var s = "Fig. " + section + "." + figure;
      $(this).attr({alt:s}).after(s);
    });
  });
});

然后你可以:

<div class="section">blabla <img id="foo" src="http://www.example.com/foo.jpg"></div>
<p>Lorem ipsum dolor sit amet <a href="#foo" class="figurereference">see here</a></p>

<script type="text/javascript">
  $(function() {
    $("a.figurereference").each(function() {
      var selector = $(this).attr("href");
      var $img = $(selector);
      var s = $(this).text() + " (" + $img.attr("alt") + ")";
      $(this).text(s);
    });
  });
</script>

尽管我同意使用css做这件事会非常整洁。

Community Mohan Dere 9 年前

我找不到任何接口来访问真实值。

如果你不能从 window.getComputedStyle ,看来这是不可能的。

更重要的是,虽然它可以做到这一点,但我认为这可能会滥用css,因为此时您正在打破内容和表示之间的障碍。

看看这个相关的问题 What are good uses of css âContentâ property?