如何使用JavaScript激活按钮样式

How can I activate button style with JavaScript?

本文关键字：按钮 样式 激活 JavaScript 何使用      更新时间：2023-09-26

这是代码

我想激活一个新的按钮式

if (visited.length == 3) {
    **HERE**
    alert('You have reached the maximum rank 1 questions');
    return;

基本上，我希望按钮在访问时变灰。长度==3。我该怎么做？我已经创建了这个样式，但我还不知道CSS，所以我猜我命名不对。

.button:maxques {
    padding:4px 39px;
    border:solid 3px #ffffff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius: 4px;
    font:23px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#ababab;
    background-color:#ededed;
    background-image: -moz-linear-gradient(top, #ededed 0%, #81898c 100%);
    background-image: -webkit-linear-gradient(top, #ededed 0%, #81898c 100%);
    background-image: -o-linear-gradient(top, #ededed 0%, #81898c 100%);
    background-image: -ms-linear-gradient(top, #ededed 0%, #81898c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#81898c', endColorstr='#81898c', GradientType=0);
    background-image: linear-gradient(top, #ededed 0%, #81898c 100%);
    -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
    -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
    box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}

将**HERE**替换为：

document.getElementById('your_button_id').className = 'button';

用新按钮的css替换button2

if (visited.length == 3) {
    document.getElementById('btn').className = 'button2';
    alert('You have reached the maximum rank 1 questions');
    return;
}

如果您想完全禁用该按钮，

if(visited.length==3) buttonObj.disabled = "true"

如果你想让它变成灰色(假设上面的CSS就是你想要的(，那么我建议

CSS

button.maxques {
    padding:4px 39px;
    border:solid 3px #ffffff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius: 4px;
    font:23px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#ababab;
    background-color:#ededed;
    background-image: -moz-linear-gradient(top, #ededed 0%, #81898c 100%);
    background-image: -webkit-linear-gradient(top, #ededed 0%, #81898c 100%);
    background-image: -o-linear-gradient(top, #ededed 0%, #81898c 100%);
    background-image: -ms-linear-gradient(top, #ededed 0%, #81898c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#81898c', endColorstr='#81898c', GradientType=0);
    background-image: linear-gradient(top, #ededed 0%, #81898c 100%);
    -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
    -moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
    box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}

JavaScript

buttonObj = document.getElementById("button");
if(visited.length==3) {
  buttonObj.className = (buttonObj.className!=null||buttonObj.className!=undefined) buttonObj.className + " maxques" : "maxques";
}

我会沿着这条线尝试一些东西，尽管你需要调整你的CSS，因为悬停属性仍然被应用。

if (visited.length == 3) {
    if(this.className.indexOf("disabled") < 0) { // disabled hasn't been applied yet
       this.className += " disabled-button";
    } 
    alert('You have reached the maximum rank 1 questions');
    return;
}

此外，我不会像您所做的那样添加自定义的psuedo类。在上面的示例中，我将您的button:maxques更改为.disabled-button。

下面是一个JsFiddle，它具有可工作的CSS样式和js方法。http://jsfiddle.net/xDaevax/pnP4D/18/

buttonID = document.getElementById("btn");
    if(visited.length==3) 
      buttonID.css( "color", "grey" );

供您参考或

buttonID = document.getElementById("btn");
    
if(visited.length==3) 
 buttonID.addClass( "myClass yourClass" )

供您参考

相关文章：