如何将css:active伪类传递给javascript?

前端之家收集整理的这篇文章主要介绍了如何将css:active伪类传递给javascript?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
参考: Comments由@AnkithAmtange发布

鉴于html

<div>Click Away</div>

CSS

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

jsfiddle https://jsfiddle.net/u3uhq9m1/

如何将当前的:active伪类DOM元素传递给javascript?

第一次尝试.注意,jQuery不是必需的.

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

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

解决方法

您可以使用document.activeElement.
$(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 />

更新

如果要传递当前:active元素 – 必须使用mousedown(而不是click事件),因为:mouse元素启动后,:active元素不再处于活动状态.

由于:活动冒泡DOM树,所有的父元素也将得到:active伪类(在下面的例子中添加了一个红色边框)所以我只采用了$(‘:active’)选择器中的最后一个元素.

检查此示例:

$(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>
原文链接:https://www.f2er.com/css/217532.html

猜你在找的CSS相关文章