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

Question

我希望我的 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>

Answer 1

为此，我建议使用 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>

Answer 2

toogle 方法（其他答案）确实是最好的方法。但是，您的代码不起作用，因为您无法使用样式属性访问 CSS，除非 CSS 是内联的。

要在 JS 中获得 CSS，您需要使用计算样式。

var compStyles = window.getComputedStyle(element);
compStyles.getPropertyValue('background-color')

注意，它以 rgb 格式输出颜色。

Answer 3

这是满足您要求的源代码。

我添加了一些代码将 rgb 转换为十六进制。

 function getStyle(el,styleProp)
    {
    if (el.currentStyle)
        return el.currentStyle[styleProp];

    return document.defaultView.getComputedStyle(el,null)[styleProp];
   }

 function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
    }

 function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
    }
 
 document.getElementById("btn1").onclick=function(){
        var a= document.getElementById("fb");
  var color = getStyle(a, "backgroundColor");
  
  var matchColors = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;
  var match = matchColors.exec(color);
  
  var colorHex = rgbToHex(parseInt(match[1]), parseInt(match[2]), parseInt(match[3]));
        if(colorHex == "#3b5999")
        {
            a.style.backgroundColor="black";
        }
        if(colorHex!="#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;
   }

<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>

    </script>
</body>
</html>

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

Change background color using javaScript (no jQuery please)?

javascript

dom-manipulation