您的位置：首页 > 其它

第一章：第三课选择器-状态伪类选择器[二]

2012-03-03 14:31 337 查看

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一练之选择器-状态伪类选择器[二] | 前端开发网(W3Cfuns.com)!</title>
<script type="text/javascript">
window.onload = function()
{
var rd1 = document.getElementById("radio1");
var rd2 = document.getElementById("radio2");
var tb = document.getElementById("textBox");

rd1.onclick = function()
{
tb.value = "状态：可用 | 前端开发网(W3Cfuns.com)!";
tb.disabled = false;
}

rd2.onclick = function()
{
tb.value = "状态：不可用 | 前端开发网(W3Cfuns.com)!";
tb.disabled = true;
}
}
</script>
<style type="text/css">
*{margin:0; padding:0;}
body{margin-bottom:20px; font-size:14px;}
#content{margin:30px auto; padding:10px; width:300px; overflow:hidden;}
label{display:inline; margin-bottom:5px; width:150px; height:25px; line-height:25px; float:left;}
#textBox{display:block; width:300px; height:22px; line-height:22px; font-family:"Microsoft yahei"; outline:none;}
#textBox:enabled{border:1px #eee solid; border-top:1px #d1d1d1 solid;}
#textBox:disabled{border:1px #999 solid; background:#efefef;}
</style>
</head>

<body>
<div id="content">
<label for="radio1"><input id="radio1" name="radio" type="radio" checked/>可用:enabled</label>
<label for="radio2"><input id="radio2" name="radio" type="radio"/>不可用:disabled</label>
<input id="textBox" type="text" value="状态：可用 | 前端开发网(W3Cfuns.com)!"/>
</div>
</body>
</html>

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

代码案例如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

第一章：第三课 选择器-状态伪类选择器[二]

第一章：第三课选择器-状态伪类选择器[二]