时间戳

首页 > 解决方案 > 使用 javaScript 更改背景颜色（请不要使用 jQuery）？

javascript - 使用 javaScript 更改背景颜色（请不要使用 jQuery）？

问题描述

我希望我的 id 'fb' 的背景颜色在单击带有 id btn 1 的按钮时变为黑色，当我再次单击它时它会变回原始颜色，即 #3b5999？我想要 javaScript 答案，请不要 jquery。

document.getElementById("btn1").onclick=function(){
        var a= document.getElementById("fb");
        if(a.style.backgroundColor=="#3b5999")
        {
            a.style.backgroundColor="black";
        }
        if(a.style.borderColor!="#3b5999")
        {
            a.style.backgroundColor="#3b5999";
        }
    }
 #fb{
            background-color: #3b5999;
            height: 100px;
            color: white;
        }
        #insta{
            background-color: #e4405f;
            height: 100px;
            color: white;
        }
        #Youtube{
            background-color: #cd201f;
            height: 100px;
            color: white;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
<body>
    <div id="fb">
        <h3>Facebbok</h3>
    </div>
    <div id="insta">
        <h3>Instagram</h3>
    </div>
    <div id="Youtube">
        <h3>Youtube</h3>
    </div>
    <button id="btn1">Click Me for facebook</button>
    <button id="btn2">Click Me for Youtube</button>
    <button id="btn3">Click me for Instagram</button>

标签： javascriptdom-manipulation

解决方案

我建议classList.toggle()为此目的使用：

document.getElementById("btn1").onclick = function() {
  var a = document.getElementById("fb");
  a.classList.toggle("colored")
}
#fb {
  background-color: #3b5999;
  height: 100px;
  color: white;
}
#fb.colored{
  background-color:black;
}

#insta {
  background-color: #e4405f;
  height: 100px;
  color: white;
}

#Youtube {
  background-color: #cd201f;
  height: 100px;
  color: white;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="fb">
    <h3>Facebbok</h3>
  </div>
  <div id="insta">
    <h3>Instagram</h3>
  </div>
  <div id="Youtube">
    <h3>Youtube</h3>
  </div>
  <button id="btn1">Click Me for facebook</button>
  <button id="btn2">Click Me for Youtube</button>
  <button id="btn3">Click me for Instagram</button>

但如果你想使用你的方法，

  • 你写borderColor的不是backgroundColor, 和
  • 读取backgroundColor属性将导致rgb(59, 89, 153)而不是#3b5999和
  • 读取backgroundColor属性只能读取内联样式定义：

document.getElementById("btn1").onclick = function() {
  var a = document.getElementById("fb");
  if(a.style.backgroundColor=="rgb(59, 89, 153)")
  {
      a.style.backgroundColor="black";
  }
  else if(a.style.backgroundColor!="rgb(59, 89, 153)")
  {
      a.style.backgroundColor="#3b5999";
  }
}
#fb {
  background-color: #3b5999;
  height: 100px;
  color: white;
}
#insta {
  background-color: #e4405f;
  height: 100px;
  color: white;
}

#Youtube {
  background-color: #cd201f;
  height: 100px;
  color: white;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="fb" style="background-color: #3b5999">
    <h3>Facebbok</h3>
  </div>
  <div id="insta">
    <h3>Instagram</h3>
  </div>
  <div id="Youtube">
    <h3>Youtube</h3>
  </div>
  <button id="btn1">Click Me for facebook</button>
  <button id="btn2">Click Me for Youtube</button>
  <button id="btn3">Click me for Instagram</button>

推荐阅读