JavaScript实现点击HTML按钮切换样式失效问题求助

Hey there! Let's break down why your button isn't switching styles when clicked—there are a couple of key mistakes in your code that are causing the problem.

1. Wrong CSS Property Syntax in JavaScript #

In CSS we use background-color, but in JavaScript, CSS properties use camelCase with no spaces. Your code has invalid syntax here:

// ❌ Invalid: spaces and hyphenated property name
var color = document.getElementById("btn").style.background - color;
// ❌ Also invalid: referencing a non-existent variable "background - color"
if (background - color === "#c1580b")

The correct property name here is backgroundColor.

2. element.style Only Reads Inline Styles #

Your initial button background is set via the .btn CSS class, but element.style.backgroundColor only grabs styles directly written in the element's style attribute. That means on the first click, your color variable will be empty, so your condition never triggers.

3. Variable Reference Mistake #

You defined a variable called color, but tried to check background - color instead—this is a typo that breaks your logic.

Fixed Code Options #

Option 1: Use Class Toggles (Recommended!) #

This is cleaner, separates style from logic, and is easier to maintain:

CSS:

.btn {
  background: #c1580b;
  box-shadow: 0px 0px 0px 3px #c1580b;
  color: #ffb734;
  /* Add your other base button styles here */
}

.btn.active {
  background-color: #173B0B;
  box-shadow: 0px 0px 0px 3px #173B0B;
  color: #459c5c;
}

JavaScript:

function abc() {
  const btn = document.getElementById("btn");
  btn.classList.toggle("active"); // One line to toggle the class—done!
}

Option 2: Fix Your Original Inline Style Logic #

If you want to stick with modifying inline styles directly, you need to get the actual computed style of the button (not just inline styles):

function abc() {
  const btn = document.getElementById("btn");
  // Get the real, applied background color (returns RGB format)
  const currentBg = window.getComputedStyle(btn).backgroundColor;
  
  // #c1580b converts to rgb(193, 88, 11)
  if (currentBg === "rgb(193, 88, 11)") {
    btn.style.cssText = "box-shadow: 0px 0px 0px 3px #173B0B; background-color: #173B0B; color:#459c5c";
  } else {
    btn.style.cssText = "box-shadow: 0px 0px 0px 3px #c1580b; background-color: #c1580b; color:#ffb734";
  }
}

Why Option 1 is Better #

• It keeps your styles in CSS where they belong—no need to mess with color format conversions
• The code is shorter and easier to debug
• You can modify your button styles later without touching the JavaScript

内容的提问来源于stack exchange，提问作者Chathuri Fernando