• 全部
  • 问答

className控制border为什么无效?

tea_year 2018-03-15 05:23:04

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>js控制CSS案例</title>
<!--2.设计样式-->
<style>
#loginSec{width:300px;height: 150px; background-color: #eee;padding: 20px;}
input#username,input#pwd{
outline: none;
border-radius: 10px;/*圆角*/
border:1px solid #666;;
}

.fStyle{
background-color: #ff9;
border:5px solid #666;;
}
.bStyle{
background-color: #fff;
border: 1px solid #666;
}
</style>
<!--3.写js来控制CSS-->
<script>

function $(obj){
return document.getElementById(obj);
}
//获得焦点事件
function focusStyle(obj){
$(obj).className="fStyle";
/* $(obj).style.backgroundColor="#ff9";
$(obj).style.borderColor="#f00";*/
}
//失去焦点事件
function blurStyle(obj){
$(obj).className="bStyle";
/*$(obj).style.backgroundColor="#fff";
$(obj).style.borderColor="#666";*/
}

</script>
</head>
<body>

<section id="loginSec">
用户:<input type="text" id="username" onfocus="focusStyle('username')" onblur="blurStyle('username')"/><br/><br/>
密码:<input type="password" id="pwd" onfocus="focusStyle('pwd')" onblur="blurStyle('pwd')"/><br/><br/>
<button id="btnLogin">登陆</button>
<button id="btnEsc">取消</button>
</section>
</body>
</html>

现在在之前的代码中设置了input的边框为了去除阴影,导致在input框获得焦点的时候,无法设置边框颜色,求教中!!!
...全文
264 点赞 收藏 2
写回复
2 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
当作看不见 2018-03-16
楼上正解,,, 常见问题 1.权重 , 自己搜索相关知识, 权重高的永远高于权重低的, 2. 权重相同时,class的位置,后加载的class 需要写在之前加载的class位置的后面 ,css 样式覆盖规则 3.jQuery 写的样式是会直接生效的,由于直接写到行内里面,权重仅次于important;
回复
因为input#username的权重 比 .fStyle 大 所以才没有效果 id 的权重是100 class 类的权重是10 所以啊,
回复
发帖
JavaScript
创建于2007-09-28

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2018-03-15 05:23
社区公告
暂无公告