Get CSS generated text inside a with Jquery

Question

I have a table like this:

<table id="orders">
  <tr>
    <td>05/06/2005</td>
    <td>3216549</td>
    <td>description</td>
    <td>2.000,00</td>
    <td>100</td>
    <td>20,00</td>
    <td><div id="state" class="state-c"> </div></td>
    <td><a href="modify.php?id=222"><span class="bt-edit">EDIT</span></a></td>
  </tr>
<table>

the part <div id="state" class="state-c"> </div> tells "Approved", "Rejected", etc, and is generated by CSS:

.state-c:before {
  content: "Confirmed";
}

now I need to get the text value of these table cells, while for all the cells I successfully use .text() method, it doesen't get the CSS generated text "Confirmed". I tried to use getGeneratedStyle, .value, and have been searching for hours for information, but no luck.

My question is: how can I get the generated text inside the <div id="state" class="state-c"> </div> which actually is empty if you look at the code?

What's `getGeneratedStyle`? Did you mean `getComputedStyle`? — j08691, Mar 03 '16 at 14:34
you change the class for change the text ? state-c, state-a, state-r... ? — Alexis, Mar 03 '16 at 14:35
Do you mandatorily need with jQuery? Is vanilla JS unacceptable? — Harry, Mar 03 '16 at 14:36
take a look at this, i suggest you should do it this way http://stackoverflow.com/questions/7882325/modify-css-style-for-pseudo-element-after-content-with-jquery#11891017 — Ankit Saroch, Mar 03 '16 at 14:38
Possible duplicate of http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin (the answer by Blazemonger to be precise) — Harry, Mar 03 '16 at 14:39

Ibrahim Khan · Accepted Answer · 2016-03-03T14:38:58.073

8

You can get it like following using window.getComputedStyle.

var text = window.getComputedStyle($('#state')[0], ':before').content
alert(text)

.state-c:before {
  content: "Confirmed";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="orders">
  <tr>
    <td>05/06/2005</td>
    <td>3216549</td>
    <td>description</td>
    <td>2.000,00</td>
    <td>100</td>
    <td>20,00</td>
    <td><div id="state" class="state-c"> </div></td>
    <td><a href="modify.php?id=222"><span class="bt-edit">EDIT</span></a></td>
  </tr>
<table>

edited Mar 03 '16 at 14:38

answered Mar 03 '16 at 14:36

Ibrahim Khan

20,616
7
42
55

Beat me to it. Here's a working example: https://jsfiddle.net/1n5pw8vk/ Note that the selector should be `.state-c`, not `#state` – Rory McCrossan Mar 03 '16 at 14:38
1

Thanks. But `#state` is working. @RoryMcCrossan – Ibrahim Khan Mar 03 '16 at 14:46

score -2 · Answer 2 · answered Mar 03 '16 at 14:37

-2

var s = '.state-c:before { content: "Confirmed";}';
var m = s.match(/"(.*?)"/);
alert(m[1]); // m[1] = quoted

just pass the css as a string and get the text inside double quotes. hope this will help you

answered Mar 03 '16 at 14:37

Pradeep Andrewson

77
1
10

score -3 · Answer 3 · answered Mar 03 '16 at 14:36

-3

Maybe you can try .find("#state").text("my text")

answered Mar 03 '16 at 14:36

P. Dialinas

1
1

Get CSS generated text inside a with Jquery

3 Answers3

Linked