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

为此，我建议使用import sys import time import threading import itertools done = False response = None def animate(): i = 0 while response is None: sys.stdout.write('\r') sys.stdout.write("Fetching MO attribute [%-20s] %d%%" % ('=' * i, 5 * i)) sys.stdout.flush() time.sleep(0.25) i += 1 t = threading.Thread(target=animate) t.start() # background process response = my_api.execute("get some data") done = True：

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

Answer 2

toogle方法（其他答案）确实是最好的方法。但是，您的代码无效，因为除非CSS是内联的，否则您无法使用style属性访问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）？

3 个答案: