How to access CSS generated content with JavaScript
I cannot find any interface to access the real live value. [of the counter]
Yeah. I don't think there is one. Sorry.
The only thing I can think of would be to go through every element (including its :before
/:after
pseudo-elements) before the element in the document, looking for counters and adding up how many there are.
Obviously that's hideous. If you're going to try to reproduce the browser's own counter
mechanism it would probably be easier (and much more compatible, given IE<=7's lack of counter/content support) to just replace it with your own script-based counters. eg. something along the lines of:
<a href="#prettypicture">this</a>
<div class="counter level=0">...</div>
<img id="prettypicture" class="counter level=1" alt="ooo, pretty"/>
window.onload= function() {
var counters= Node_getElementsByClassName(document.body, 'counter');
var indices= [];
for (var counteri= 0; counteri<counters.length; counteri++) {
var counter= counters[counteri];
var level= Element_getClassArgument(counter, 'level');
while (indices.length<=level)
indices.push(0);
indices[level]++;
indices= indices.slice(level+1);
var text= document.createTextNode('Figure '+indices.join('.'));
counter.parentNode.insertBefore(text, counter.nextSibling);
if (counter.id!=='') {
for (var linki= document.links.length; linki-->0;) {
var link= document.links[i];
if (
link.hostname===location.hostname && link.pathname===location.pathname &&
link.search===location.search && link.hash==='#'+counter.id
) {
var text= document.createTextNode('('+indices.join('.')+')');
link.parentNode.insertBefore(text, link.nextSibling);
}
}
}
}
};
Find a text generated by content CSS property
It's not possible (unless browser itself has this functionality) because pseudo element are not in DOM. So even with js/jQuery you can't select them
Clicking on css content property
You cannot attach events on pseudo class elements since they are not part of the DOM, you can only attach events to the original elements or parents.
You can create an element containing the image and position it in the same place that the pseudo element is positioning it, and attach any event handler to it.
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:
In HTML:
<span>foo</span>
In jQuery:
$('span').hover(function(){
$(this).attr('data-content','bar');
});
In CSS:
span:after {
content: attr(data-content) ' any other text you may want';
}
If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:
In HTML:
<span>foo</span>
In jQuery:
$('span').hover(function(){
$(this).addClass('change').attr('data-content','bar');
});
In CSS:
span.change:after {
content: attr(data-content) ' any other text you may want';
}
Related Topics
Getcurrentposition() and Watchposition() Are Deprecated on Insecure Origins
How to Display an Image Stored as Byte Array in Html/JavaScript
How to Use Sockets in JavaScript\Html
Cross-Origin Data in Html5 Canvas
Html Form Action and Onsubmit Issues
What Is Innerhtml on Input Elements
Pass Vars to JavaScript Via the Src Attribute
How to Show Alternate Image If Source Image Is Not Found? (Onerror Working in Ie But Not in Mozilla)
Show Hide Divs on Click in HTML and CSS Without Jquery
Full Text Search in HTML Ignoring Tags/&
How to Force a Link to Open in a Specific Browser
Input Value Is a String Instead of a Number
How to Fix Blurry Text in My Html5 Canvas
How to Scroll to Top of Page With JavaScript/Jquery
Does JavaScript Have Something Like Ruby'S Method_Missing Feature