guest271314 guest271314 - 1 month ago 13
CSS Question

How to pass css :active pseudo class to javascript?

Reference: Comments posted by @AnkithAmtange




Given html

<div>Click Away</div>


css

div {
width: 200px;
height: 200px;
background: orange;
}
div:active {
color: white;
background: rebeccapurple;
}


jsfiddle https://jsfiddle.net/u3uhq9m1/

How to pass the currently
:active
pseudo class
DOM
element to
javascript
?

First attempt. Note, jQuery is not a requirement.

$(document).ready(function() {
var active;
$("div").click(function() {
active = $(":active");
setTimeout(function() {
console.log("active", active)
}, 1000)
})
})


https://jsfiddle.net/u3uhq9m1/1/

Answer

You can use the document.activeElement for that.

$(function() {
  $(document).on('click', function() {
    console.log(document.activeElement);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a">asdf</div>
<span>123</span>
<select>
  <option>1</option>
</select>
<button>123</button>
<input />

Update

If you want to pass the current :active element - you must use the mousedown (and not the click event), because the :active element is not active anymore once your mouse is up.

Since the :active bubbles up the DOM tree, all the parent elements will also get the :active pseudo-class (added a red border in the following example) so I took only the last element in the $(':active') selector.

Check this example:

$(document).ready(function() {
  var active;
  $(document).mousedown(function() {
    active = $(":active");
    setTimeout(function() {
      console.log("active", active.last()[0])
    }, 1000)
  })
})
div {
  width: 100px;
  height: 100px;
  background: orange
}
div:active {
  color: white;
  background: rebeccapurple
}
:active {
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click Away</div>

Comments