CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS3每日一练之选择器-状态伪类选择器[二]

CSS3每日一练之选择器-状态伪类选择器[二]

       过去我们的form元素有可用和不可用状态,我们分别为它们定义不同的class来实现,然后通过js对其元素设置可用状态的同时指定不同的class即可。然而我们有了CSS3就没必要这么麻烦了,js只需要指定可用状态,样式会自己选择,非常方便,js代码也很精简。

:enabled选择器和:disabled选择器
:enabled状态伪类选择器用来指定当前元素处于可用状态的样式;
:disabled状态伪类选择器用来指当前元素处于不可用状态的样式;

代码案例如下:
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="gb2312">
  5.         <title>CSS3每日一练之选择器-状态伪类选择器[二] | 前端开发网(W3Cfuns.com)!</title>
  6.         <script type="text/javascript">
  7.         window.onload = function()
  8.         {
  9.                 var rd1 = document.getElementById("radio1");
  10.                 var rd2 = document.getElementById("radio2");
  11.                 var tb = document.getElementById("textBox");
  12.                
  13.                 rd1.onclick = function()
  14.                 {
  15.                         tb.value = "状态:可用 | 前端开发网(W3Cfuns.com)!";
  16.                         tb.disabled = false;
  17.                 }
  18.                         
  19.                  rd2.onclick = function()
  20.                  {
  21.                          tb.value = "状态:不可用 | 前端开发网(W3Cfuns.com)!";
  22.                          tb.disabled = true;
  23.                  }
  24.         }
  25.         </script>
  26.         <style type="text/css">
  27.         *{margin:0; padding:0;}
  28.         body{margin-bottom:20px; font-size:14px;}
  29.                 #content{margin:30px auto; padding:10px; width:300px; overflow:hidden;}
  30.                         label{display:inline; margin-bottom:5px; width:150px; height:25px; line-height:25px; float:left;}
  31.                         #textBox{display:block; width:300px; height:22px; line-height:22px; font-family:"Microsoft yahei"; outline:none;}
  32.                         #textBox:enabled{border:1px #eee solid; border-top:1px #d1d1d1 solid;}
  33.                         #textBox:disabled{border:1px #999 solid; background:#efefef;}
  34.         </style>
  35.     </head>
  36.    
  37.     <body>
  38.             <div id="content">
  39.                     <label for="radio1"><input id="radio1" name="radio" type="radio" checked/>可用:enabled</label>
  40.                     <label for="radio2"><input id="radio2" name="radio" type="radio"/>不可用:disabled</label>
  41.                     <input id="textBox" type="text" value="状态:可用 | 前端开发网(W3Cfuns.com)!"/>
  42.             </div>
  43.     </body>
  44. </html>

【CSS3每日一练之选择器-状态伪类选择器[二]】相关文章

1. CSS3每日一练之选择器-状态伪类选择器[五]

2. CSS3每日一练之选择器-状态伪类选择器[四]

3. CSS3每日一练之选择器-状态伪类选择器[三]

4. CSS3每日一练之选择器-状态伪类选择器[二]

5. CSS3每日一练之选择器-状态伪类选择器[一]

6. CSS3每日一练之选择器-结构性伪类选择器[三]

7. CSS3每日一练之选择器-结构性伪类选择器[二]

8. CSS3每日一练之选择器-结构性伪类选择器[一]

9. CSS3每日一练之选择器-结构性伪类选择器[六]

10. CSS3每日一练之选择器-结构性伪类选择器[五]

本文来源:https://www.51html5.com/a868.html

点击展开全部

﹝CSS3每日一练之选择器-状态伪类选择器[二]﹞相关内容

「CSS3每日一练之选择器-状态伪类选择器[二]」相关专题

其它栏目

也许您还喜欢