1

I can use CSS to style an element so that it changes appearance when active. For instance:

.test:active { 
    background-color: yellow;
}

But how do I do this in javascript if I want to apply it to a specific element, not by class? I can set the background color for the default state using:

document.getElementById("myid").style.backgroundColor = "yellow"

But I can't do this:

document.getElementById("myid").style.active.backgroundColor = "yellow"

I don't want the javascript to respond to the element being active or not - I want to do a static initialization in javascript that then makes a specific element have a different color when it is active.

If the element was guaranteed to have an id I could use javascript to append a style sheet rule which used the #id selector, but I don't have this guarantee. All I can be sure of is I will get a reference to an element and I need to style it so that it has a different color when active.

Michael
  • 9,060
  • 14
  • 61
  • 123
  • Why not add your own style class to the element? – TimoStaudinger Jun 17 '16 at 23:51
  • @TimoSta I may have to if there is no other way. Is it not possible to access this part of CSS via javascript? – Michael Jun 17 '16 at 23:59
  • I don't think you can use css pseudo-class rules using JavaScript. – TimoStaudinger Jun 18 '16 at 00:03
  • I'm confused. If you want a particular element to have particular styling when active, then just add the `test` class to that element. What do you want to accomplish that that doesn't? Pseudo-classes are only usable as part of selectors in CSS rules, which makes sense if you think about it. The only way to handle them via JS is to write your own CSS rules using the CSSOM API, and it should be rare case indeed that you would actually need to do that. –  Jun 18 '16 at 05:49

2 Answers2

0

You could use event listeners with the specific element.

When defining element, try this. You can of course make it a button or whatever:

<!-- in this case, using 'this' will refer to the element at hand. this way the element is targeted even if it has no ID or class -->
<input onfocus="elemFocused(this)" onblur="elemBlurred(this)">

This makes it so that when you focus the element (make it active), it runs the focused function. When it blurs (you select a different input or something), it runs the blurred function. In javascript:

function elemFocused(element){
    element.style.backgroundColor = 'yellow'; // sets BG color to yellow
}
function elemBlurred(element){
    element.style.backgroundColor = 'initial';// sets BG color to default; you can change if needed
}
MineAndCraft12
  • 671
  • 5
  • 15
  • I already stated that I don't want the javascript element to have to respond to the element being active or not, so this approach won't work. – Michael Jun 17 '16 at 23:58
  • I don't believe it possible to access CSS pseudo-classes such as :active and :hover. I've never seen it done, and some research just now tells me it cannot be done as well. Check the top answer on this SO here: http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript – MineAndCraft12 Jun 18 '16 at 00:42
0

I'm not certain that you have programatic access to the ':active' style directly, but you do have access to the active event so you can replicate it with something like this:

In your CSS add a css class to handle your active state, something like:

.active{
  background-color: red;
}

Then just add the class on that event:

document.getElementById("myid").onfocus = function(){
  this.className += "active";
};

document.getElementById("myid").onblur = function(){
  this.className = "/*replace this with the original classes*/";
};
Chris Patty
  • 189
  • 1
  • 3
  • 12
  • Yeah, that's what I'm trying to figure out, if there is programmatic access to the ":active" style. – Michael Jun 17 '16 at 23:59
  • I don't believe you can access elements based on their state unless you can store it yourself using an attribute on the tag or a class like above. [This answer goes more in-depth](http://stackoverflow.com/questions/29312176/change-active-pseudo-class-style-with-jquery) – Chris Patty Jun 18 '16 at 00:02
  • @torazaburo oh duh, you're absolutely right. It should be the mouse down and mouse up events. – Chris Patty Jun 18 '16 at 07:14