使用Javascript激活按鈕樣式

Question

這是代碼

我想激活一個新的按鈕樣式

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

基本上，我希望按鈕在訪問時變灰。length==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

用新按鈕的CSS替換button2

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

Answer 3

盡管您仍需要調整hover屬性，但我還是會嘗試一些類似的方法。

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

為了您的利益或

buttonID = document.getElementById("btn");

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

為了你的高興