如何在运行时更改 html 按钮的单击事件上的类

How to change the class of an html button at runtime on its click event?

本文关键字：单击 事件 按钮 html 运行时      更新时间：2023-09-26

我的html页面中有以下按钮：

<button id="button1" onclick="myFunction()" class="buttonClassA"></button>
<button id="button2" onclick="myFunction()" class="buttonClassA"></button>
<button id="button3" onclick="myFunction()" class="buttonClassA"></button>
<button id="button4" onclick="myFunction()" class="buttonClassA"></button>

以下是我写了buttonClassA的css文件

.buttonClassA
{
    display: block; width:auto; height:auto; padding:5px; margin-top:10px;
    background: #398525; /* old browsers */
    background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
    box-shadow: inset 0px 0px 6px #fff;
    -webkit-box-shadow: inset 0px 0px 6px #fff;
    border: 1px solid #5ea617;
    border-radius: 10px;
    font:26px times-new-roman; 
    text-align: center;
    text-decoration: none;
    color: #147032;
    text-shadow: 0px 1px 2px #b4d1ad;
    -moz-transition: color 0.25s ease-in-out;
    -webkit-transition: color 0.25s ease-in-out;
    transition: color 0.25s ease-in-out;
}

我的要求：当我单击任何按钮时，其背景应该会更改。

我应该怎么做？我应该创建另一个类按钮类B，我只是在其中更改背景颜色并从按钮类A复制所有其他内容吗？如果这是方法，那么如何在运行时单击按钮时更改按钮的类？请建议？

你可以使用另一个类：

function myFunction () {
  $(this).toggleClass('buttonClassB');
};
.buttonClassB {
    background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="myFunction.call(this)">Click me</button>

您也可以使用 style 属性：

function myFunction () {
    $(this).css('background', 'red');
    // <button style="background:red">
};

链接：

  • http://api.jquery.com/toggleClass
  • http://api.jquery.com/css
是的

，您可以使用jquery添加/删除类

$(document).ready(function () {        
        $("#button1,#button2,#button3,#button4").live("click", function () {
            $(this).removeClass("buttonClassA");
            $(this).addClass("buttonClassB");
        });
    });

在jQuery中，你可以这样做来删除实际的类，并为你的元素分配另一个类：

$(document).ready(function(){
    $('.buttonClassA').click(function(){
       $(this).removeClass('buttonClassA').addClass('buttonClassB');
    });
});

在你的css中放了另一个叫做.buttonClassb的类

buttonClassB
{
    /*your style*/
}

仅为背景创建另一个类可能是一个好主意。然后，您可以删除内联脚本并使用如下所示的内容：

$('.buttonClassB').click(function(){
     $(this).addClass('buttonClassB');
});

如果您希望它在单击时再次返回，您可以使用 toggleClass（'buttonClassB'）

代替onclick=myFunction()使用以下JS代码：

onclick="this.className=''; this.style.backgroundColor='gray';

如果你不需要太多的CSS来定义新样式，那么你可以简单地修改一些样式属性（例如，在这种情况下background-color），你可以简单地使用JS来控制它。

我应该怎么做？我应该在 我只是更改背景颜色并从中复制所有其他内容 按钮A类？如果这是方法，那么我该如何更改类 单击按钮时运行时的按钮？请建议？

您不需要复制所有内容。您可以只添加要更改的 CSS 属性。其余的将被继承。所以让我们只说背景：

.buttonClassB {
    background: #398525; /* old browsers */
    background: linear-gradient(to bottom, #8DD297, #398525); /* standard */
    background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* old firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
 }

我还建议在你的代码中使用无前缀和标准值——一些浏览器已经有了它们，比如 Firefox。

然后，您可以在单击按钮时轻松切换类。取决于再次单击同一按钮时是否要删除类，您必须使用 addClass 或 toggleClass：

$(".buttonClassA").on("click", function() {
    $(this).toggleClass("buttonClassB");
});

如果您想使更改持久化，只需将toggleClass替换为addClass而不是切换它。

你可以这样做

工作演示：http://jsfiddle.net/J68sp/

$('button').on('click', function(){
    var btn=$(this);
    if(btn.attr('class')=='buttonClassA'){
         btn.removeClass('buttonClassA').addClass('buttonClassB');
    }
    else{
        btn.removeClass('buttonClassB').addClass('buttonClassA');
    }
})

请检查此 https://jsfiddle.net/8ors4p2c/

<button id="button1" class="buttonClassA">hello</button>

它的 CSS 是

.buttonClassA {
  background-color: green;
}
.buttonClassA.buttonClassB {
  background-color: red;
}

这是JS代码

jQuery('.buttonClassA').click(function() {
  if(jQuery('.buttonClassA').hasClass('buttonClassB')) {
        jQuery('.buttonClassA').removeClass('buttonClassB');
  } else {
        jQuery('.buttonClassA').addClass('buttonClassB');
  }
});


//This Is My Jquery or JavaScript Code
$( "button" ).click(function() {
  $( this ).toggleClass( "green" );
});
/*This Is My CSS Code*/
.orange {
    background: Orange;
    color: white;
    text-align:center;
  line-height:50px;
  border-radius: 30px;
  width: 100px;
  height: 50px;
  }
  
.green {
   
  background-color: green;
  color: white;
  
  }
<! -- This Is My HTML Code -->
<head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
  <head>
  <body>
<button class="orange">hello</button>
</body>

<head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <style>
  .blue {
   width: 100px;
  height: 50px;
  background-color: green;
  color: white;
  text-align:center;
  line-height:50px;``
  border-radius: 30px;
  }
  .red {
    background: red;
    color: white;
  }
  </style>
  <head>
  <body>
<button class="blue">hello</button>
<script>
$( "button" ).click(function() {
  $( this ).toggleClass( "red" );
});
</script>
</body>

我想你想改变组中按钮的背景，所以你想改变它的背景与它们相比，试试这个;（一组四个按钮）：

<!-- Call function for a button; id="btnButton1" for example -->
<button id="btnButton1" onClick= "chngBG(Event, 'btnButton1')">Button 1</button>

<script 
function chngBG(evt, MyButton) {
// Add your code to reset backgrounds to all other buttons
// set a background you want to the targeted button:
document.getElementById(MyButton).style.background = "#fff6a1";
}
</script>
相关文章：