使用各种 JavaScript 更改按钮类

Change Button Class with Javascript of sorts

本文关键字：按钮 JavaScript      更新时间：2023-09-26

所以，我正在尝试使用 javascript 更改输入框的类，但似乎无法正确处理。

我有 2 个 CSS 类。

正常类是.butz我希望按钮在单击时更改为的按钮是.布兹

所以，我有这个我的 html：

<input id="butval1" class="butz" type="button" name="design1" value="Choose Design" onclick="" />

这是我的 JS

document.getElementById("butval1").className += "butzz";

我真正想做的，是把班级从butz改成butzz或。。。如果可能，请使用getElementByClassName更改按钮的背景颜色

我有 9 个按钮都在同一个类中，我希望单击的按钮变为绿色或 #24f000

谢谢大家

使用javascript您可以使用以下方法更改类名

document.getElementById('butval1').className = 'butzz'

如果你想通过javascript添加新类，请使用

document.getElementById('butval1').className += ' butzz'

对于更改单击的 DOM 类，您需要创建函数并将单击的 DOM 作为参数传递到函数中，并使用该传递的参数来执行此操作。

例

<input id="butval1" class="butz" type="button" name="design1" value="Choose Design" onclick="changeID(this);" />
<input id="butval2" class="butz" type="button" name="design1" value="Choose Design" onclick="changeID(this);" />
<input id="butval3" class="butz" type="button" name="design1" value="Choose Design" onclick="changeID(this);" />
function changeID(args)
{
    args.className = 'butzz'
}

现场演示

尝试：

<input id="butval1" class="butz" type="button" name="design1" value="Choose Design" onclick="changeID(this);" />
<input id="butval2" class="butz" type="button" name="design1" value="Choose Design" onclick="changeID(this);" />
<input id="butval3" class="butz" type="button" name="design1" value="Choose Design" onclick="changeID(this);" />
function changeID(elm){
    var NAME = elm;
    var currentClass = NAME.className;
    if (currentClass == "butz") { 
        NAME.className = "butzz";   
    } else {
        NAME.className = "butz";  
    }
}

演示小提琴

相关文章：