点亮元素双击 - Html

在Html中，可以使用JavaScript实现当元素被双击时点亮的效果。这个效果可以应用在很多场景中，比如在网页中展示图片集合，当图片被双击时点亮该图片。

下面是一个实现这个效果的例子。

代码实现

HTML

要实现这个效果，我们首先需要在HTML中添加元素。这个例子中我们添加了一个div元素，并且给它添加了一个class。

<div class="lightable"></div>

CSS

在CSS中，我们为这个class设置一些样式属性，使其可以被双击时点亮。

.lightable {
  width: 100px;
  height: 100px;
  background-color: grey;
  outline: none;
}
.lightable:focus {
  background-color: yellow;
  box-shadow: 0 0 10px yellow;
}

JavaScript

最后，在JavaScript中，我们需要为这个元素添加一个双击事件，当它被双击时点亮。

let lightable = document.querySelector('.lightable');

lightable.addEventListener('dblclick', function() {
  lightable.focus();
});

效果展示

添加完这些代码后，运行页面，当鼠标双击div元素时，该元素会被背景变为黄色，达到了点亮的效果。

总结

通过这个例子，我们可以学习到如何使用HTML、CSS、JavaScript实现元素双击点亮的效果。