How to Determine If ::Before Is Applied to an Element

How to Determine if ::before is applied to an element?

Use getComputedStyle and check the value of content. If it's none then the pseudo element isn't defined:

var elem = document.querySelector(".box");
var c = window.getComputedStyle(elem,"before").getPropertyValue("content");
console.log(c);

var elem = document.querySelector(".alt");
var c = window.getComputedStyle(elem,"before").getPropertyValue("content");
console.log(c);

.box:before {
  content:"I am defined"
}

<div class="box"></div>

<div class="alt"></div>

How to determine if HTML element has pseudo element?

What exactly is causing problems with your existing solution?

This method of walking through elements:

var allElements = document.getElementsByTagName("*");
for (var i = allElements.length; i--;) {
  //var usedStyle = window.getComputedStyle(allElements[i], ":before/:after");    
  ...
}

is about thousands of elements per 1ms.

And call of getComputedStyle shall not be too slow as it fetches data that is already calculated at the moment of call (on rendered document).

So all this shall really work fast enough. Yes, it is O(N) task in principle but gets run once, right?

Is it possible to detect a click of an :after or :before pseudo element with jQuery?

Maybe. Depending on how you structure your pseudo content you would have to rely on calculating mouse position for clicks on the actual div. The event handlers would all go on the div, and not the pseudo element because it doesn't exist in the DOM.

See Manipulating CSS :before and :after pseudo-elements using jQuery
for some more info. Especially BoltClock's answer.

Also see Felix's comment for another possible solution without mouse position: Only detect click event on pseudo-element

How to check if an element has been loaded on a page before running a script?

Sounds like a job for MutationObserver!

A MutationObserver is like an event listener: you can attach it to any DOM element to listen for changes:

var observer = new MutationObserver(function (mutationRecords) {
    console.log("change detected");
});

The callback is passed an array of MutationRecords, which hold different lists of added/deleted/modified nodes.

Then, we attach the observer to any node:

observer.observe(document.body, {childList: true});
// second argument is a config: in this case, only fire the callback when nodes are added or removed

Note: IE support is not amazing. (surprise, surprise) Only works on IE 11. (Edge supports it, though.)

Here's another SO question about detecting changes to the DOM: Detect changes in the DOM

Snippet:

document.querySelector("button").addEventListener("click", function () {

  document.body.appendChild(document.createElement("span"));

});

var observer = new MutationObserver(function (m) {

  if (m[0].addedNodes[0].nodeName === "SPAN")

    document.querySelector("div").innerHTML += "Change Detected<br>";

});

observer.observe(document.body, {childList: true});

<button>Click</button>

<div></div>

Select all elements before element with class?

a {

  text-decoration: none;

  border-left: 1px solid black;

}

a.active, a.active ~ * {

  border: none;

}

<div>

    <a href>One</a>

    <a href>Two</a>

    <a href>Three</a>

    <a href class="active">Four</a>

    <a href>Five</a>

</div>

Only detect click event on pseudo-element

This is not possible; pseudo-elements are not part of the DOM at all so you can't bind any events directly to them, you can only bind to their parent elements.

If you must have a click handler on the red region only, you have to make a child element, like a span, place it right after the opening <p> tag, apply styles to p span instead of p:before, and bind to it.

How can I check if an element exists in the visible DOM?

It seems some people are landing here, and simply want to know if an element exists (a little bit different to the original question).

That's as simple as using any of the browser's selecting method, and checking it for a truthy value (generally).

For example, if my element had an id of "find-me", I could simply use...

var elementExists = document.getElementById("find-me");

This is specified to either return a reference to the element or null. If you must have a Boolean value, simply toss a !! before the method call.

In addition, you can use some of the many other methods that exist for finding elements, such as (all living off document):

• querySelector()/querySelectorAll()
• getElementsByClassName()
• getElementsByName()

Some of these methods return a NodeList, so be sure to check its length property, because a NodeList is an object, and therefore truthy.

---

For actually determining if an element exists as part of the visible DOM (like the question originally asked), Csuwldcat provides a better solution than rolling your own (as this answer used to contain). That is, to use the contains() method on DOM elements.

You could use it like so...

document.body.contains(someReferenceToADomElement);

---

Related Topics