图像功能上的 Box-Shadow 不起作用

Question

想不通这个，为什么每次点击图片上的onclick功能都没有阴影？你能帮忙吗，我是一个自学程序员，将不胜感激。 （看看我的 Javascript 文件）。

最终结果应该是这样的 https://jenniferdewalt.com/more_drop_shadow.html 但她用 jQuery 写的，我还不知道这个框架

代码

    
    var newBlur = 0;
    var newSpread = 0;

document.getElementById("catIMG").addEventListener("click", shadowIMG);

function shadowIMG() {
    var myShadow = genShadow();
    document.getElementById("catIMG").style.boxShadow = myShadow;
    console.log(myShadow);
}

function genShadow() {
    var arr = [0, 0, newBlur, newSpread,];
    newBlur +=1;
    newSpread +=5;
    var newShadow = '"' + arr[0] + 'px ' + arr[1] + 'px ' + arr[2] + 'px ' + arr[3] + 'px ' + 'Black' + '"' ;
    return newShadow;
}

body
{
    margin: 0;
    background-color: lightgrey;
}

input {
    position: absolute;
    left: 10%;
    width: 100px;
    height: 50px;
    font-size: 20px;
    color: white;
    background-color: green;
}

#blueTop {
    font-size: 30px;
    font-family: Arial;
    width: 100%;
    height: 100px;
    background-color: mediumpurple;
}


#catIMG {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translate(-50%);
    width: 750px;
    height: 500px;
    cursor: pointer;

}

#catText {
    position: absolute;
    left: 50%;
    top: 800px;
    transform: translate(-50%);
    width: 750px;
    text-align: center;
    font-size: 50px;
    font-weight: 100;
    color: rgb(50,20,0);
    cursor: pointer;
}

h5 {
    position: absolute;
    left: 50%;
    top: 1000px;
    transform: translate(-50%);
    font-size: 25px;
    cursor: pointer;
}

<form>
<input id="testButton"type="button" value="Test"/>
</form>
<div id="blueTop"></div>
<img id="catIMG" src="./more_grumpy_shadow.png"/>
<h1 id="catText">"You will always be lucky if you know how to make friends with strange cats."</h1>
<h5>- Colonial proverb</h5>

Answer 1

问题出在这一行：

var newShadow = '"' + arr[0] + 'px ' + arr[1] + 'px ' + arr[2] + 'px ' + arr[3] + 'px ' + 'Black' + '"' ;

您正在添加额外的引号。

// JavaScript source code

var newBlur = 2;
var newSpread = 2;



//functions
document.getElementById("catIMG").addEventListener("click", shadowIMG);

function shadowIMG() {
    var myShadow = genShadow();
    document.getElementById("catIMG").style.boxShadow = myShadow;
    debugger;
    console.log(myShadow);
}

function genShadow() {
    var arr = [10, 10, 10, 10,];
    newBlur +=1;
    newSpread +=5;
    var newShadow = '' + arr[0] + 'px ' + arr[1] + 'px ' + arr[2] + 'px ' + arr[3] + 'px ' + ' black' + '' ;
    console.log(newShadow);
    return newShadow;
}

body
{
    margin: 0;
    background-color: lightgrey;
}

input {
    position: absolute;
    left: 10%;
    width: 100px;
    height: 50px;
    font-size: 20px;
    color: white;
    background-color: green;
}

#blueTop {
    font-size: 30px;
    font-family: Arial;
    width: 100%;
    height: 100px;
    background-color: mediumpurple;
}


#catIMG {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translate(-50%);
    width: 750px;
    height: 500px;
    cursor: pointer;

}

#catText {
    position: absolute;
    left: 50%;
    top: 800px;
    transform: translate(-50%);
    width: 750px;
    text-align: center;
    font-size: 50px;
    font-weight: 100;
    color: rgb(50,20,0);
    cursor: pointer;
}

h5 {
    position: absolute;
    left: 50%;
    top: 1000px;
    transform: translate(-50%);
    font-size: 25px;
    cursor: pointer;
}

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form>
            <input id="testButton"type="button" value="Test"/>
        </form>
        <div id="blueTop"></div>
            <img id="catIMG" src=""/>
            <h1 id="catText">"You will always be lucky if you know how to make friends with strange cats."</h1>
            <h5>- Colonial proverb</h5>

    </body>
    </html>

Answer 2

您无需做额外的工作。每当用户点击按钮时，使用 javascript 样式属性增加 blur-radius 和 spread-radius 使其变得简单。

var i = 0;
var j = 3;
document.getElementById("makeshadow").addEventListener("click", function() {
    i++;
    j = i * 3;
   document.getElementById("catIMG").style.boxShadow  = 
   "rgba(0, 1, 0, 0.35) 0px 0px "+i+"px "+j+"px";
});

body
{
    margin: 0;
   padding:20px;
}

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link href="./dropShadow.css" type="text/css" rel="stylesheet"/>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
           
  

            <img id="catIMG" src="http://via.placeholder.com/350x150"/>
      
<button id="makeshadow">Button</button>

    </body>
    </html>

Answer 3

删除变量 newShadow 的引号解决了这个问题，感谢所有帮助我的人。