关联CSS与JS后HTML按钮不显示，重命名类名恢复正常的技术咨询

I’ve dealt with this exact type of naming conflict problem before, so let’s break down what’s going on and solve it properly:

Root Cause: Naming Collisions #

The issue boils down to conflicting names with existing code (either in your own project or any third-party scripts/styles you’re using):

1. JavaScript Global Variable Conflict: You’re using start_btn.onclick directly, which relies on browsers auto-mounting elements with id attributes to the global window object. If any other script on the page defines a variable named start_btn, it’ll overwrite this element reference—breaking your click handler and potentially messing up rendering.
2. CSS Specificity Conflict: The class name btn-12 is likely being used elsewhere in your codebase (or a third-party stylesheet) with rules that hide the element (like display: none). When you rename the class or ID, you’re avoiding that conflicting rule, which is why the button starts working.

Permanent Fixes #

1. Avoid Global Variable Dependencies (JavaScript) #

Stop relying on the browser’s auto-mounted ID variables. Instead, explicitly fetch elements using getElementById() or querySelector()—this eliminates global conflicts entirely:

// Get the button container explicitly
const startBtnContainer = document.getElementById('start_btn');
// Get the button itself (optional, but better if you want to bind to the button directly)
const startBtn = startBtnContainer.querySelector('.btn-12');

// Add the click handler safely
if (startBtn) {
  startBtn.onclick = () => {
    // Also fetch info_box explicitly instead of relying on global vars
    const infoBox = document.getElementById('info_box');
    if (infoBox) {
      infoBox.classList.add("activeInfo");
    }
  };
}

2. Boost CSS Selector Specificity #

Make your button styles more specific by combining the parent id with the button class. This ensures your styles take priority over any conflicting rules with the same class name:

/* Target the button inside its unique container */
#start_btn .btn-12 {
  align-items: center;
  position: relative;
  right: 30%;
  bottom: 200px;
  border: none;
  box-shadow: none;
  line-height: 42px;
  -webkit-perspective: 230px;
  perspective: 230px;
}

#start_btn .btn-12 span {
  background: rgb(0, 172, 238);
  background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
  display: block;
  position: absolute;
  width: 250px;
  height: 40px;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
  border-radius: 5px;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
  transition: all .3s;
}

#start_btn .btn-12 span:nth-child(1) {
  box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
  transform: rotateX(90deg);
  transform-origin: 50% 50% -20px;
}

#start_btn .btn-12 span:nth-child(2) {
  transform: rotateX(0deg);
  transform-origin: 50% 50% -20px;
}

#start_btn .btn-12:hover span:nth-child(1) {
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
  transform: rotateX(0deg);
}

#start_btn .btn-12:hover span:nth-child(2) {
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
  color: transparent;
  transform: rotateX(-90deg);
}

3. How to Confirm the Conflict #

If you want to verify exactly where the conflict is coming from:

• Check CSS: Open your browser’s DevTools (F12), select the button element, and look in the "Styles" tab. Any rules that are crossed out are being overridden—you’ll see the source of the conflicting rule here.
• Check JavaScript: In the DevTools console, type start_btn and hit enter. If it returns something other than your <div id="start_btn"> element, you’ve got a global variable conflict.

内容的提问来源于stack exchange，提问作者B Vino Jan