[英]Activate button style with Javascript
I want to activate a new button style 我想激活一个新的按钮样式
if (visited.length == 3) {
**HERE**
alert('You have reached the maximum rank 1 questions');
return;
Basically, I want the button to grey out when visited.length == 3. How can I do this? 基本上,我希望按钮在访问时变灰。length==3。我该怎么做? I've already created the style, but I do not know CSS (yet) so I'm guessing I'm not naming it right.
我已经创建了样式,但是我还不知道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';
Replace button2
with the css of your new button 用新按钮的CSS替换
button2
if (visited.length == 3) {
document.getElementById('btn').className = 'button2';
alert('You have reached the maximum rank 1 questions');
return;
}
I would try something along these lines, though you'll need to adjust your CSS as the hover attribute still gets applied. 尽管您仍需要调整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;
}
Also, I wouldn't add a custom psuedo-class like you are doing. 另外,我不会像您那样添加自定义伪类。 In the above example, I changed your
button:maxques
to .disabled-button
. 在上面的示例中,我将您的
button:maxques
更改为.disabled-button
。
Here is a JsFiddle with a working CSS style and js approach. 这是一个使用CSS样式和js方法的JsFiddle。 http://jsfiddle.net/xDaevax/pnP4D/18/
http://jsfiddle.net/xDaevax/pnP4D/18/
If you want to disable the button entirely, 如果您想完全禁用按钮,
if(visited.length==3) buttonObj.disabled = "true"
If you want to just have it become grey (assuming your CSS above is what you want for it to become) then I suggest 如果您只是想让它变灰(假设上面的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;
}
buttonObj = document.getElementById("button");
if(visited.length==3) {
buttonObj.className = (buttonObj.className!=null||buttonObj.className!=undefined) buttonObj.className + " maxques" : "maxques";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.