Get Pseudo-Element Properties with JavaScript
CSS pseudo-elements are incredibly useful -- they allow us to create CSS triangles for tooltips and perform a number of other simple tasks while preventing the need for additional HTML elements. To this point, these pseudo-element CSS properties have been unreachable by JavaScript but now there's a method for getting them!
Assume your CSS looks like:
.element:before {
content: 'NEW';
color: rgb(255, 0, 0);
}
To retrieve the color property of the .element:before, you could use the following JavaScript:
var color = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('color')
Passing the pseudo-element as the second argument to window.getComputedStyle allows access to said pseudo-element styles! Keep this snippet in your toolbox for years to come -- pseudo-elements will only grow more useful with broader browser support!
![Send Text Messages with PHP]()
Kids these days, I tell ya. All they care about is the technology. The video games. The bottled water. Oh, and the texting, always the texting. Back in my day, all we had was...OK, I had all of these things too. But I still don't get...
![9 More Mind-Blowing WebGL Demos]()
With Firefox OS, asm.js, and the push for browser performance improvements, canvas and WebGL technologies are opening a world of possibilities. I featured 9 Mind-Blowing Canvas Demos and then took it up a level with 9 Mind-Blowing WebGL Demos, but I want to outdo...
![Record Text Selections Using MooTools or jQuery AJAX]()
One technique I'm seeing more and more these days (CNNSI.com, for example) is AJAX recording of selected text. It makes sense -- if you detect users selecting the terms over and over again, you can probably assume your visitors are searching that term on Google...
![Animated AJAX Record Deletion Using jQuery]()
I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with jQuery JavaScript.
The PHP - Content & Header
The following snippet goes at the...
Yeah, too bad this doesn’t work with IE8 and previous.
currentStyle is good for some things, but… not for this one.
By the way, I forgot to say that it’s usually recommended to use document.defaultView.getComputedStyle instead of window.getComputedStyle, because there are cases where document.defaultView !== window.
I don’t know which ones, though. I guess it’s not the case of “common” web pages.
From the MDN documentation:
In many code samples online,
getComputedStyleis used from thedocument.defaultViewobject. In nearly all cases, this is needless, asgetComputedStyleexists on thewindowobject as well. It’s likely the defaultView pattern was some combination of (1) folks not wanting to write a spec forwindowand (2) making an API that was also usable in Java. However there is a single case where the defaultView’s method must be used: when using Firefox 3.6 to access framed styles.https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle
Very useful! I ran across this scenerio many times where i wanted to access the psedo element props.
Nice!
Long time a go I was looking for a way to bind events on pseudo elements, is that posible today?
Thanks!
I don’t believe that’s possible yet Toni!
Thanks for this solution. Was looking for this!
With content:url(“some image”) as a property Firefox correctly gets that string using any of these three methods:
getComputedStyle(someelement,"::after").getPropertyValue("content") getComputedStyle(someelement,"::after").content getComputedStyle(someelement,"::after")..getPropertyCSSValue("content").cssTextNone of these methods work in Chrome, they either return null or undefined. What gives?
Never mind, I found the issue is the element must not be display:none to access it according to https://code.google.com/p/chromium/issues/detail?id=236603
Is there a way, we can set the pseudo style value back in css?
Pseudo Element’s integration with Javascript is new to me. I will make sure to give it a try and see how it works with diff browsers. but I wonder if there is any way to associate handlers to these elements.
Thanks.
How would you make a function that could reference
self?When I place this in a jQuery function and try to replace
$('.element')with($(this)), I have issues.Did you ever find a way to use
($(this))?How about when the desired element is a child of an :active element? Like:
.parent:active .child { display: inline-block }:activeis a pseudo class, not a pseudo element, so you can’t grab it withgetComputedStyleGreat Post! However, the code gives me the certain values like height and top as px in Chrome and as % in Firefox and IE. Anyway to get a consistent result for all browsers?
I am looking to bind event to pseudo classes with vanilla javascript. Isn’t there a hack already
like
getPropertyValue, is there anysetPropertymethods that can replace the contents?