Is this possible?
For example, if a user presses the "return" key and I trigger the "mousedown" event, how do I also render the element with :active styles?
I know it is possible to do this using classes, but I'd greatly prefer to use the pre-existing :active styles.
Is this possible?
For example, if a user presses the "return" key and I trigger the "mousedown" event, how do I also render the element with :active styles?
I know it is possible to do this using classes, but I'd greatly prefer to use the pre-existing :active styles.
Share Improve this question asked Nov 12, 2011 at 1:34 Evan SharpEvan Sharp 2,0593 gold badges12 silver badges7 bronze badges 4- This question has been asked many times. stackoverflow./questions/311052/… – Casey Robinson Commented Nov 12, 2011 at 1:40
-
7
@Casey-I don't think this is the same question that you posted a link for. In that link the question was basically how to set a pseudoclass by javascript. Here, Evan seems to be asking how make sure a pseudoclass that is already set in CSS is actually activated based off a javascript event. In other words, he has
:activestyles preset, he is triggering events in javascript, how does he make sure those events are causing the item to be considered "active." – ScottS Commented Nov 12, 2011 at 2:18 - 1 Thanks @Scott, you're correct - I'm asking if you can activate the styles for a CSS pseudo-class using JavaScript, not the other way around. – Evan Sharp Commented Nov 17, 2011 at 20:04
- And the short answer is: that isn't possible. – Nickolay Commented Sep 16, 2019 at 0:22
1 Answer
Reset to default 4According to the CSS 2.1 spec, the :active pseudo-class applies while:
an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
You should be able to dispatch a mousedown event with the subject element as the event target and it should stay active until a matching mouseup event is dispatched. If it works, it likely won't work reliably on enough browsers to make it useful.
It would be much simpler (and more widely supported) to add/remove a suitable class.
Edit
Here is an example of using DOMActivate. You can see that dispatching an activate event on an element fires the associated onactivate listener, but doesn't change the appearance of the element being activated.
Perhaps you can simulate actiation by listening for the activate event, adding a class to highlight the element, then remove it after a few moments using setTimeout or similar.
<style type="text/css">
p:active {
background-color: red;
}
div:active {
background-color: green;
}
</style>
<script type="text/javascript">
function Init () {
var p, ps = document.getElementsByTagName('p');
var d = document.getElementById('div0');
if (ps.length && ps[0].addEventListener) {
for (var i=0, iLen=ps.length; i<iLen; i++) {
p = ps[i];
p.addEventListener ("DOMActivate", onActivate, false);
}
d.addEventListener("DOMActivate", onActivate, false);
}
}
function onActivate () {
console.log(this.id + ' has been activated');
}
function simulateActive(id) {
var evt = document.createEvent("UIEvents");
evt.initUIEvent("DOMActivate", true, false, window,1);
var el = document.getElementById(id);
var cancelled = !el.dispatchEvent(evt);
if(cancelled) {
console.log("cancelled");
} else {
console.log("not cancelled");
}
}
</script>
</head>
<body onload="Init ();">
<div id="div0">div
<p id="para0">para0</p>
<p id="para1">para1</p>
<button onclick="
simulateActive('para0');
">Activate para</button>
</div>
<button onclick="
simulateActive('para0');
">Activate para</button>
</body>