单击“不在Javascript中工作”时更改HTML按钮样式

我想在单击按钮时更改按钮颜色。这是我使用的代码

函数abc（）{
var color=document.getElementById（“btn”）.style.background-color；
如果（背景色==“#c1580b”）
document.getElementById（“btn”）.style.cssText=“框阴影：0px 0px 0px 3px 173B0B；背景色：#173B0B；颜色：#459c5c”；
其他的
document.getElementById（“btn”）.style.cssText=“框阴影：0px 0px 0px 3px#c1580b；背景色：#c1580b；颜色：#ffb734”；
}

.btn{
背景：#c1580b；
颜色：#ffb734；
宽度：80px；
高度：80px；
线高：70px；
显示：块；
边界半径：50%；
文本对齐：居中；
文字装饰：无；
边框：2倍实心#000；
盒影：0px 0px 0px 3px#c1580b；
字号：中等；
}

---

暂停

您的代码包含一些逻辑错误。if条件没有意义：

background-color

表示«将

color

的值减去

background

的值（该值似乎未定义）

要获取按钮的背景色，您需要以下内容

背景=document.getElementById（“btn”）.style.backgroundColor；
如果（背景==“#c1580b”）

我不太理解背景色的那部分，但是要用十六进制检查背景，必须从十六进制转到rgb

可以在这里看到更多如何将十六进制传递给rgb的示例-

这是一个你想要的例子

函数abc（）{
var bt=document.getElementById（'btn'）；
var style=bt.currentStyle | | window.getComputedStyle（bt）；
var bcolor=rgb2hex（样式背景色）；
如果（b颜色=='#c1580b'）{
bt.style.cssText=“盒影：0px 0px 0px 3px#173B0B；背景色：#173B0B；颜色：#459c5c”；
}否则{
bt.style.cssText=“盒影：0px 0px 0px 3px#c1580b；背景色：#c1580b；颜色：#ffb734”；
}
}
//将rbg传递给hex
函数rgb2hex（rgb）{
如果（rgb.search（“rgb”）=-1）{
返回rgb；
}否则{
rgb=rgb.match（/^rgba？\（\d+），\s*（\d+），\s*（\d+），\s*（\d+）$/）；
函数十六进制（x）{
返回（“0”+parseInt（x）.toString（16））.slice（-2）；
}
返回“#”+hex（rgb[1]）+hex（rgb[2]）+hex（rgb[3]）；
}
}

.btn{
背景：#c1580b；
颜色：#ffb734；
宽度：80px；
高度：80px；
线高：70px；
显示：块；
边界半径：50%；
文本对齐：居中；
文字装饰：无；
边框：2倍实心#000；
盒影：0px 0px 0px 3px#c1580b；
字号：中等；
}

---

暂停

如果您总是以十六进制格式（#c1580b）使用此颜色，那么：

---

这里有一个工作代码

我建议您避免使用内联的

onclick=“abc（）”

，并选择使用完全分离的代码（这有利于可维护性）

使用RGBA获得背景色；然后你可以用一个简单的函数把它转换成十六进制代码，你可以在网上找到这个函数，这里我用了其中的一个。因此，获取背景色的正确方法是

window.getComputedStyle（btn，null）[“backgroundColor”]

，而如果您想设置它，正确的形式应该是

document.getElementById（“btn”）.style.backgroundColor=“#0000”

/**
*函数中的代码仅在DOM就绪时运行。
*这是唯一使用的jQuery函数，其余的都在vanillaJS中。
*/
$（文档）.ready（函数（）{
/**
*rgb2hex
*将RGB转换为十六进制。
*资料来源：https://jsfiddle.net/Mottie/xcqpF/1/light/
* 
*@param{string}rgb
*/
var rgb2hex=函数（rgb）{
rgb=rgb.match（/^rgba？[\s+]？\（[\s+]（\d+[\s+]？，[\s+]？（\d+[\s+]？，[\s+]？（\d+[\s+]？/i）；
返回（rgb&&rgb.length==4）？“#”+
（“0”+parseInt（rgb[1]，10）.toString（16））.slice（-2）+
（“0”+parseInt（rgb[2]，10）.toString（16））.slice（-2）+
（“0”+parseInt（rgb[3]，10）.toString（16））.slice（-2）：”；
}
/**
*btn点击事件的EventListener
*/
document.getElementById（“btn”）
.addEventListener（'单击'，函数（））{
//将btn保存到var中，以便以后使用
var btn=document.getElementById（“btn”）；
//注意：getComputedStyle（）获取元素背景色
var color=window.getComputedStyle（btn，null）[“backgroundColor”]；
//将RGBa转换为十六进制
var hex=rgb2hex（颜色）；
//带三元运算符的IF-ELSE
（十六进制==“#c1580b”）
？btn.style.cssText=“盒子阴影：0px 0px 0px 3px#173B0B；背景色：#173B0B；颜色：#459c5c”
：btn.style.cssText=“框阴影：0px 0px 0px 3px#c1580b；背景色：#c1580b；颜色：#ffb734”；
});
})；

.btn{
背景：#c1580b；
颜色：#ffb734；
宽度：80px；
高度：80px；
线高：70px；
显示：块；
边界半径：50%；
文本对齐：居中；
文字装饰：无；
边框：2倍实心#000；
盒影：0px 0px 0px 3px#c1580b；
字号：中等；
光标：指针；
}

暂停
background-color
是什么？您正在减去两个变量，其中一个变量不存在。而且减法运算符不能只返回一个数字。单个括号中的错误太多了……
if（background==“#c1580b”）
每次都将为false，因为
样式。backgroundColor
返回rgb值而不是十六进制值。属性用于获取和设置元素的内联样式。
document.getElementById（“btn”）.style.backgroundColor
将始终返回空字符串，因为
背景色
是通过CSS设置的。
窗口。getComputedStyle（btn，null）[“backgroundColor”]
是获取背景色的正确方法。谢谢，这正是我所期望的。谢谢，这也是一个工作示例。非常有用。
function abc() {
    var elm = document.getElementById( 'btn' );
    var color = window.getComputedStyle( elm ).backgroundColor;

    if ( color === 'rgb(193, 88, 11)' )
        elm.style.cssText = 'box-shadow: 0 0 0 3px #173B0B; background-color: #173B0B; color: #459c5c'
    else
        elm.style.cssText = 'box-shadow: 0 0 0 3px #c1580b; background-color: #c1580b; color: #ffb734'
}