使用jQuery获取CSS的before-content [英] Get Before-Content of CSS with jQuery

问题描述

我有以下CSS

  h1：before {
 content：章节counter（lvl1）\000d\000a; 
 counter-increment：lvl1; 
 white-space：pre-wrap; 
} 
 h1 {
 page-break-before：right; 
} 
  

和此HTML

< pre class =lang-html prettyprint-override> < p> ...< / p>
< h1> A标题< / h1>
< p> ...< / p>


使用给定的CSS我会得到类似

< pre class =lang-none prettyprint-override> 第1章
A标题


当我尝试用jQuery获取文本时，我得到A Title。是否有可能获得Chapter 1 \\\
A Title？

感谢

解决方案

使用 getComputedStyle（）：

  $ 'h1'）。each（function（）{
 console.log（window.getComputedStyle（this，'：before'）。content）; 
}）; 
  

before遍历DOM，它获取/设置前面的元素，它不会访问伪元素。

Working JS Fiddle ，由 Eric 。

虽然有一个不幸的警告，这种方法返回了 content 声明，而不是实际生成的内容。

I have the following CSS

h1:before {
    content: "Chapter " counter(lvl1) "\000d\000a";
    counter-increment: lvl1;
    white-space: pre-wrap;
}
h1 {
    page-break-before: right;
}

and this HTML

<p>...</p>
<h1>A Title</h1>
<p>...</p>

With the given CSS I get something like

Chapter 1
A Title

When I try to get the text with jQuery I get "A Title". Is there a possibility to get "Chapter 1\nA Title"?

Thanks

解决方案

Use getComputedStyle():

$('h1').each(function(){
    console.log(window.getComputedStyle(this,':before').content);
});

before() is a jQuery method used to traverse the DOM, it gets/sets the preceding element, it does not access the pseudo-element.

Working JS Fiddle, supplied by Eric.

Though there is the unfortunate caveat that this approach returns the literal string used in the content declaration, rather than the actual generated-content.

这篇关于使用jQuery获取CSS的before-content的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！