如何在点击事件中更改多种样式？

huangapple
go评论125阅读模式
英文:

How can I change multi styles onClick event?

问题

需要更改5个案例的样式，通过点击事件触发。例如，如果用户点击按钮，需要更改3种不同的样式。

  1. function myFunction() {
  2.     document.getElementById("pa-menu").classList.toggle("responsive-menu-action");
  3. }
  4. window.onclick = function(event) {
  5.     if (!event.target.matches('.pa-header-right-responsive-menu-btn')) {
  6.         var dropdowns = document.getElementsByClassName("pa-menu");
  7.         for (let i = 0; i < dropdowns.length; i++) {
  8.             let openDropdown = dropdowns[i];
  9.             if (openDropdown.classList.contains('responsive-menu-action')) {
  10.                 openDropdown.classList.remove('responsive-menu-action');
  11.             }
  12.         }
  13.     }
  14. }
  1. .pa-menu {
  2.     width: 150px;
  3. }
  4. .customa {
  5.     background: red;
  6. }
  7. .customb {
  8.     font-size: 14px;
  9. }
英文:

I need to change style for 5 case with onclick event. for example,
if the user clicks on btn, need to change more than 3 different style.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function myFunction() {
  2.     document.getElementById(&quot;pa-menu&quot;).classList.toggle(&quot;responsive-menu-action&quot;);
  3. }
  4. window.onclick = function(event) {
  5.     if (!event.target.matches(&#39;.pa-header-right-responsive-menu-btn&#39;)) {
  6.         var dropdowns = document.getElementsByClassName(&quot;pa-menu&quot;);
  7.         for (let i = 0; i &lt; dropdowns.length; i++) {
  8.             let openDropdown = dropdowns[i];
  9.             if (openDropdown.classList.contains(&#39;responsive-menu-action&#39;)) {
  10.                 openDropdown.classList.remove(&#39;responsive-menu-action&#39;);
  11.             }
  12.         }
  13.     }
  14. }

<!-- language: lang-css -->

  1. .pa-menu {
  2.     width: 150px;
  3. }
  4. .customa {
  5.     background: red;
  6. }
  7. .customb {
  8.     font-size: 14px;
  9. }

<!-- end snippet -->

答案1

得分: 1

以下是翻译好的部分：

这个问题不太清楚。

下面的代码在点击按钮时切换了按钮的 3 个类名。

  1. let btn = document.getElementById("btn");
  2. btn.addEventListener("click", function (event) {
  3.     btn?.classList.toggle("border-blue");
  4.     btn?.classList.toggle("background-orange");
  5.     btn?.classList.toggle("border-radius");
  6. });
  1. .border-blue {
  2.     border: 5px solid blue;
  3. }
  4. .background-orange {
  5.     background: orange;
  6. }
  7. .border-radius {
  8.     border-radius: 20px;
  9. }
  1. <button id="btn" class="background-orange">Click me</button>
英文:

The question is not clear.

The following code toggles 3 class names for the button when clicking on it.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let btn = document.getElementById(&quot;btn&quot;);
  2. btn.addEventListener(&quot;click&quot;, function (event) {
  3.     btn?.classList.toggle(&quot;border-blue&quot;);
  4.     btn?.classList.toggle(&quot;background-orange&quot;);
  5.     btn?.classList.toggle(&quot;border-radius&quot;);
  6. });

<!-- language: lang-css -->

  1. .border-blue {
  2.     border: 5px solid blue;
  3. }
  4. .background-orange {
  5.     background: orange;
  6. }
  7. .border-radius {
  8.     border-radius: 20px;
  9. }

<!-- language: lang-html -->

  1. &lt;button id=&quot;btn&quot; class=&quot;background-orange&quot;&gt;Click me&lt;/button&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月7日 08:56:01
  • 转载请务必保留本文链接：https://go.coder-hub.com/75657156.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定