Question

我希望能够更改boxShadow。我希望它每秒都能改变为不同的颜色。

我尝试了很多方法，但却无法让它发挥作用。我真的希望它能在4种颜色之间进行更改，但是2种颜色可以正常使用！

<style>
var myVar = setInterval(function () {
    smoke()
}, 1000);

function smoke() {
    if(document.getElementById("profile_description_box").style.boxShadow = "0px 0px 35px #ed47d0") {
        document.getElementById("myDIV").style.boxShadow = "0px 0px 25px #4d4d4d";
    }
    if(document.getElementById("profile_description_box").style.boxShadow = "0px 0px 35px #4d4d4d") {
        document.getElementById("myDIV").style.boxShadow = "0px 0px 35px #ed47d0";
    }
}
</style>

Answer 1

我不确定你究竟是什么html dom元素因此不能准确，但下面的jsBin工作。您需要根据需要更改为不同的阴影

JSBin

Improvised包含工作代码，即以下代码可用。

    var myVar=setInterval(smoke, 1000);

function smoke() {  
  var ele = document.getElementById("profile_description_box");
  var eleBoxShadow = ele.style.boxShadow;
  console.log('calling' + eleBoxShadow);
  if(eleBoxShadow == "red 0px 0px 35px") {
     ele.style.boxShadow = "0px 0px 25px blue";
   }
   else if(eleBoxShadow == "blue 0px 0px 35px") {
      ele.style.boxShadow = "0px 0px 35px red";
   }
  else {
    ele.style.boxShadow = "0px 0px 35px red";
  }
}

几点

style.boxShadow的值包含rgb（xx，xx，xx），因此你的if比较不会起作用
尝试使用webkit，moz和其他特定于浏览器的boxShadhow属性。
如hin110531所指，删除样式并添加脚本！

Answer 2

您的代码几乎存在，但您犯了一些错误。

首先，删除您的<style>声明。
第二次，您的if声明错误。在比较值时，您应该使用==。

下面为您提供工作代码。

＆＃13;

var myVar=setInterval(function () {smoke()}, 1000);

function smoke() {

  if( document.getElementById("profile_description_box").style.boxShadow == "" ) {
    
    document.getElementById("myDIV").style.boxShadow = "0px 0px 25px skyblue";
    document.getElementById("profile_description_box").style.boxShadow = "0px 0px 35px red";     
    
  } else if ( document.getElementById("profile_description_box").style.boxShadow == "0px 0px 35px red" ) {
    
    document.getElementById("myDIV").style.boxShadow = "0px 0px 35px blue";
    document.getElementById("profile_description_box").style.boxShadow = "0px 0px 35px orange";
    
  } else if ( document.getElementById("profile_description_box").style.boxShadow == "0px 0px 35px orange" ) {
    
    document.getElementById("myDIV").style.boxShadow = "0px 0px 35px skyblue";
    document.getElementById("profile_description_box").style.boxShadow = "0px 0px 35px red";
    
  }
}

＆＃13;

#profile_description_box {
  padding:50px;
}

#myDIV {
  height:100px;  
}

＆＃13;

<div id="profile_description_box">

   <div id="myDIV"></div>

</div>

＆＃13;

Answer 3

以下是我如何使用它。

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
position: absolute;
width: 100px;
height: 100px;
background-color: coral;
color: white;
box-shadow: 10px 10px 10px blue;
}
</style>
</head>
<body>
<p>Click the "Try it" button to set the boxShadow property of the DIV element:</p>
Test: <span id="ttest">1</span>
<button onclick="myFunction()">Try it</button>

<div id="myDIV">
<h1>myDIV</h1>
</div>

<script>
var myVar=setInterval(function () {smoke()}, 1000);

function smoke() {
var a = document.getElementById("ttest").innerHTML;
var b = +a + 1;
document.getElementById("ttest").innerHTML = b;

if( a == 1 ) {
document.getElementById("myDIV").style.boxShadow = "10px 10px 10px blue";
}
if( a == 7 ) {
document.getElementById("myDIV").style.boxShadow = "10px 10px 10px red";
}
if( a == 13 ) {
document.getElementById("myDIV").style.boxShadow = "10px 10px 10px black";
}
if( a == 19 ) {
document.getElementById("myDIV").style.boxShadow = "10px 10px 10px   skyblue";
}
if( a == 29 ) {
document.getElementById("myDIV").style.boxShadow = "10px 10px 10px red";
document.getElementById("ttest").innerHTML = "1";
}
}
</script>
</body>
</html>

css boxShadow javascript change setinterval

3 个答案: