Question

我想激活一个新的按钮样式

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;
}

Answer 1

将**HERE**替换为：

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

Answer 2

将button2替换为新按钮的css

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

Answer 3

我会沿着这些方向尝试一些东西，但是你需要调整你的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;
}

另外，我不会像你一样添加自定义的伪类。在上面的示例中，我将您的button:maxques更改为.disabled-button。

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

Answer 4

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

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";
}

Answer 5

buttonID = document.getElementById("btn");

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

代表refrence 或

buttonID = document.getElementById("btn");

if(visited.length==3) 
 buttonID.addClass( "myClass yourClass" )

代表refrence

使用Javascript激活按钮样式

5 个答案:

CSS

的JavaScript