Get value of pseudo classes

Question

.a:before {
  content: 'b';
  display: table;
      }

How can I get content value of class 'a'? I was try:

`var b = window.getComputedStyle(document.querySelector('a'), ':before').getPropertyValue('content');`

It return me an error:

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

Answer 1

Like others have pointed out, you're missing a dot before a in your selector. The correct code should look like this:

var text = getComputedStyle(document.querySelector('.a'), ':before').getPropertyValue('content');
alert(text);

.a:before {
  content: 'b';
  display: table;
}

<div class="a"></div>

As a general debugging strategy, it's a good idea to split longer statements in smaller parts to identify what is wrong in your code. For example, here you could rewrite your JavaScript as:

var a = document.querySelector('a');
var computedStyle = window.getComputedStyle(a, ':before');
var content = computedStyle.getPropertyValue('content');

This way, we see immediately that a, the value assigned in the first statement, is actually null, and that explains the TypeError in the second statement. This reduces the problem to what is wrong in document.querySelector('a')?, which is fairly easier to deal with.