5

I have a very simple element:
enter image description here
How can I check if this element contains the ::after using Javascript?

(I have the element using document.getElementsByTagName('h2')[0])

I don't know how the thing works, and I don't need to know, I just need the code to see if it exists...

In some cases the element looks like this:
enter image description here
I need to be able to detect both cases, if possible!

pnuts
  • 58,317
  • 11
  • 87
  • 139
ManIkWeet
  • 1,298
  • 1
  • 15
  • 36

2 Answers2

1

It would be something like this:

var pre = onload; // assign previous onload if any
onload = function(){ // onload wrapper start
if(pre)pre(); // execute previous onload in the new onload
var doc = document, h2a = doc.getElementsByTagName('h2');
var afterIn = [], afterOut = [];
for(var i=0,l=h2a.length; i<l; i++){
  var h2 = h2a[i];
  if(h2.value.match(/\:\:after/)){
    afterIn.push(h2);
  }
  else{
    afterOut.push(h2);
  }
}
for(var i=0,l=afterIn.length; i<l; i++){
  console.log(afterIn[i].value);
}
for(var i=0,l=afterOut.length; i<l; i++){
  console.log(afterOut[i].value);
}
} // onload wrapper end
StackSlave
  • 10,613
  • 2
  • 18
  • 35
0

Check this link, explains how to use it in plain JavaScript (might only work in newer browsers): http://davidwalsh.name/pseudo-element

Edit: if you're looking to edit what the content of the :after is, reference this SO question: Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

Community
  • 1
  • 1
RebelFist
  • 549
  • 4
  • 11
  • 1
    Tried it, works: `window.getComputedStyle(document.querySelector('h2'), ':after').getPropertyValue('background')` is different when the ::after isn't there, so I can work with it! – ManIkWeet Oct 16 '15 at 23:44
  • Glad to hear it - I was looking at the jQuery selectors (https://api.jquery.com/category/selectors/) but it doesn't seem like they have one for that since it's more a CSS thing than HTML one... – RebelFist Oct 17 '15 at 00:01