如何创建一个可以使用 onclick change/restore 部分样式的按钮？

Question

对不起新手。

我想创建一个带有 onclick 事件属性的按钮，它可以通过单击更改 ID 为 "changeMe" 的部分元素中所有元素的样式，然后再单击一次更改回其原始外观单击，反之亦然。

Answer 1

如果你使用的是jQuery，你可以使用.css()函数来改变某些部分的样式，你可以通过操作一个全局布尔值来检查你的按钮之前是否被点击过变量

Answer 2

<html>
    <head>
    <style>
    .colorRed{
      color:'red';
    }
    <style>


    </head>
    <body>
    <section id="section-to-toggle-style">
     <span> Test Text </span>
    </section>
    <button onCick="toggleStyle()">Toggle Style</button>

    </body>
<script> 
 var applied = false;
 function toggleStyle(){
 var sectionToModify = document.getElementById("section-to-toggle-style");
   if(!applied){
   sectionToModify.classList.add("colorRed");
   }else{

   sectionToModify.classList.remove("colorRed");
   }
 }
</script>
</html>

此代码未经测试，但这应该适用于您的情况，基本思想是相同的。希望对您有所帮助！

Answer 3

您可以为您的版块打开和关闭 css class。

根据您想要的样式创建 css class。它将作为 'on'

动态添加和删除它 from/to 您的部分以查看其恢复到原始状态的效果 -- 没有您创建的 class。

如何创建一个可以使用 onclick change/restore 部分样式的按钮？

How do I create a button that can change/restore a section's styling using onclick?

javascript

onclick

toggle