如何在JavaScript中对已存在的属性使用toggleAttribute？实现按钮文本与背景色的双向切换

Got it, let's get that bookmark button working properly with two-way text switching and persistent background color! Here's how to fix your code step by step:

First, Let's Fix the HTML #

Your original button had an invalid inline toggleAttribute call—we'll handle all the logic in JavaScript instead. Here's the cleaned-up HTML:

<h1>Mastercraft Bamboo Monitor Riser</h1>
<p>A beautiful &amp; handcrafted monitor stand to reduce neck and eye strain.</p>
<div class="flex">
  <input type="submit" name="" value="Back this project" class="button">
  <div class="bookmark">
    <i class="fas fa-bookmark icon"></i>
    <input type="submit" name="" value="Bookmark" class="book">
  </div>
</div>

Update CSS for Persistent Active State #

The :active pseudo-class only applies while the mouse is pressed—we need a custom .active class to keep the style after clicking. Replace your existing .book:active and .icon:active styles with these:

.card{ position: absolute; top: 330px; left: 380px; background-color: white; padding:60px 130px 0px 130px; border-radius: 6px; line-height: 2; }
.text-center{ text-align: center; }
.gray{ background-color: rgb(245, 245, 245); height: 1600px; }
.card h1{ font-weight: 700; font-size:26px; }
.card p{ color: rgb(120,120,120); font-size: 15px; }
.card{ height: 270px; }
.button{ position: relative; right: 58px; padding: 16px 45px 15px 45px; background-color: hsl(176, 72%, 28%); border-radius: 20px; margin-top: 30px; border: none; color: white; outline: none; cursor: pointer; font-weight: 700; }
.book{ position: relative; left: 75px; padding: 18px 35px 15px 45px; background-color: rgb(245, 245, 245); border-radius: 20px; margin-top: 30px; border: none; color: rgb(120, 120, 120); outline: none; cursor: pointer; font-weight: 700; }
/* New active class for persistent button styling */
.book.active{ color: white; background-color: hsl(176, 50%, 47%); }
.icon{ position: relative; top: 17px; left: 110px; box-sizing: content-box; border-radius: 50%; padding: 17px 19px; background-color: rgb(100, 100, 100); color: rgb(180, 180, 180); z-index: 1; }
/* New active class for persistent icon styling */
.icon.active{ color: white; background-color: hsl(176, 72%, 28%); }

Correct the JavaScript Logic #

There were two main issues here:

• classlist is a typo—JavaScript is case-sensitive, so it should be classList
• toggleAttribute doesn't switch attribute values (it just adds/removes attributes entirely). We need to manually check the current value and toggle it.

Here's the fixed JS:

window.onload = function(){
  const book = document.querySelector('.book');
  const icon = document.querySelector('.icon');
  
  book.addEventListener('click', () => {
    // Toggle the button text between "Bookmark" and "Bookmarked"
    if (book.value === "Bookmark") {
      book.value = "Bookmarked";
    } else {
      book.value = "Bookmark";
    }
    
    // Toggle the active classes for persistent styling
    book.classList.toggle('active');
    icon.classList.toggle('active');
  })
}

Key Changes Explained: #

• Text Toggle: We check the current value of the button and switch it to the opposite text. This gives us the two-way toggle you need.
• Persistent Styling: Using classList.toggle('active') adds/removes the .active class we defined in CSS, which keeps the background color and text color changed even after releasing the mouse.
• Fixed Typo: classList (capital L) is the correct property name—this was preventing the class toggle from working before.

Now your bookmark button will:

1. Switch between "Bookmark" and "Bookmarked" every time you click it
2. Keep the highlighted background color and icon styling until you click it again

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