我希望能够更改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>
答案 0 :(得分:0)
我不确定你究竟是什么html dom元素因此不能准确,但下面的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";
}
}
几点
答案 1 :(得分:0)
您的代码几乎存在,但您犯了一些错误。
<style>
声明。 if
声明错误。在比较值时,您应该使用==
。下面为您提供工作代码。
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;
答案 2 :(得分:-1)
以下是我如何使用它。
<!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>