如何通过css：活动伪类到javascript？ [英] How to pass css :active pseudo class to javascript?

问题描述

参考：评论发布者@AnkithAmtange

---

给定html

 < div>点击[关闭]< / div> 
  

css

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

jsfiddle https://jsfiddle.net/u3uhq9m1/

如何传递目前的 ：active pseudo class DOM 元素到 javascript ？

注意，jQuery不是必需的。

  $（document）.ready（function（）{
 var active; 
 $（div）。click（function（）{
 active = $（：active）; 
 setTimeout（function（）{
 console.log active，active）
}，1000）
}）
}）
  

$ b b

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

解决方案

您可以使用 document.activeElement 。

  $（function（）{$（document）.on（'click'，function 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>< < option> 1< / option>< / select>< button> 123< / button>< input />  

>

更新

如果要传递当前：active 元素 - 必须使用 mousedown （而不是点击事件），因为<$ c

由于：active

code>冒泡的DOM树，所有的父元素也将获得：活动伪类（在下面的示例中添加了一个红色边框）只有 $（'：active'）选择器中的最后一个元素。

检查此示例：

   div {width：100px; height：100px; background：orange} div：active {color：white;背景：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 ;  

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/

解决方案

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>

这篇关于如何通过css：活动伪类到javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！