javascript - 单击框阴影阴影 - Javascript（不是 jquery）

Question

我希望在单击图像时出现阴影。我现在不使用 Jquery，所以如果可能的话，提供一个 java-script 解决方案。这是我的小提琴：http: //jsfiddle.net/zUNhD/7/

我还希望框阴影仅在当前选择的任何项目上处于活动状态。（最后点击的项目应该是唯一有阴影的项目）

    window.onload = function(){
var box1 = document.getElementById('thumbs');
var box1Div1 = box1.getElementsByTagName('input');
var img1 = box1Div1[0]
    console.log(img1);

    img1.onclick = function(){
    img1.setAttribute("class", "BoxShadow");
   };
   };

Answer 1

从评论扩展：

您可以使用:active选择器来响应“点击”事件，并使用:focus选择器来响应“焦点”事件：

input:active, input:focus{
    box-shadow:2px 2px 2px blue;
}

小提琴

Answer 2

您的代码中尚未调用该函数。

window.onload = function(){
var box1 = document.getElementById('thumbs');
var box1Div1 = box1.getElementsByTagName('input');
var img1 = box1Div1[0];      
img1.onclick = function(){
img1.setAttribute("class", "DropShad");
};
}();

这是工作小提琴... http://jsfiddle.net/zUNhD/18/

Answer 3

有关代码的一些简化，请参阅此 jsfiddle。css 类没有正确分配，它应该在前面加一个点。将您的脚本标签放在结束</body>标签附近并使用：

var box1 = document.getElementById('thumbs');
var box1Div1 = box1.getElementsByTagName('input');
var img1 = box1Div1[0]

img1.onclick = function(){
  img1.className = "DropShad";
};