如何在单击按钮时更改 css class 的属性？

Question

我正在尝试通过单击按钮更改 CSS class 的属性。首先，我的 html

中有这个按钮

   <button id="Regions" active="false" 
class="btn-square orangee-border grow" 
data-target="#square1">Private Cloud Regions</button>

然后我有这个 css class，我想将属性从显示：none 更改为显示：阻止单击上一个按钮！

.zone-marker {
        font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
position: absolute;
    width:auto;
  font-size: 12px !important;
  z-index: inherit !important;
display: none;
  }

我试过了

document.querySelector('#Regions').addEventListener('click', () => {
  document.querySelector('.zone-marker').classList.add('myClass');
});

应用相同的 class 与显示块！

.zone-marker {
        font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
position: absolute;
    width:auto;
  font-size: 12px !important;
  z-index: inherit !important;
display: block;
  }

它不起作用..如果有人知道那就太好了！

Answer 1

这是一个最小的 JS fiddle 示例： HTML:

 <button id="Regions" active="false" 
    class="btn-square orangee-border grow" 
    data-target="#square1"
    onclick="change()"
    >Private Cloud Regions</button>

js:

function change() {
document.getElementById('Regions').style.color = "red"
}

css:

.zone-marker {
        font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
position: absolute;
    width:auto;
  font-size: 12px !important;
  z-index: inherit !important;
display: none;
  }

https://jsfiddle.net/j6f4vm5d/1/

Answer 2

这是您想要做的吗？

document.querySelector('#Regions').addEventListener('click', () => {
  document.querySelector('.zone-marker').style.display = "block";
});

.zone-marker {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  position: absolute;
  width: auto;
  z-index: inherit !important;
  display: none;
}

<button id="Regions" active="false" class="btn-square orangee-border grow" data-target="#square1">Private Cloud Regions</button>
<div class="zone-marker">JUST A DIV</div>

或者您可以用这个将显示从 none 切换到 block。

document.querySelector('#Regions').addEventListener('click', () => {
  const el = document.getElementsByClassName('zone-marker')[0];

  if (el.style.display === "block") {
    el.style.display = "none";
  } else {
    el.style.display = "block";
  }
});

.zone-marker {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  position: absolute;
  width: auto;
  z-index: inherit !important;
  display: none;
}

<button id="Regions" active="false" class="btn-square orangee-border grow" data-target="#square1">Private Cloud Regions</button>
<div class="zone-marker">JUST A DIV</div>

如果您有多个具有相同 class zone-marker 的元素，并且想要将所有元素的显示从 none 切换为 block，您可以在下面尝试此操作。

document.querySelector('#Regions').addEventListener('click', () => {
  const el = document.getElementsByClassName('zone-marker');

  Array.from(el).forEach(el => {
    if (el.style.display === "block") {
      el.style.display = "none";
    } else {
      el.style.display = "block";
    }
  });
});

.zone-marker {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  width: auto;
  z-index: inherit !important;
  display: none;
}

<button id="Regions" active="false" class="btn-square orangee-border grow" data-target="#square1">Private Cloud Regions</button>
<div class="zone-marker">JUST A DIV 1</div>
<div class="zone-marker">JUST A DIV 2</div>
<div class="zone-marker">JUST A DIV 3</div>
<div class="zone-marker">JUST A DIV 4</div>
<div class="zone-marker">JUST A DIV 5</div>

如何在单击按钮时更改 css class 的属性？

How to change the property of a css class on click on a button?

html

javascript

css

jquery

leaflet

如何在单击按钮时更改 css class 的 属性？

How to change the property of a css class on click on a button?

html

javascript

css

jquery

leaflet

如何在单击按钮时更改 css class 的属性？