className控制border为什么无效？

前端领域优质创作者

博客专家认证

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框获得焦点的时候，无法设置边框颜色，求教中!!!

...全文

375 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

当作看不见 2018-03-16

打赏
举报

楼上正解,,, 常见问题 1.权重 , 自己搜索相关知识, 权重高的永远高于权重低的, 2. 权重相同时,class的位置,后加载的class 需要写在之前加载的class位置的后面 ,css 样式覆盖规则 3.jQuery 写的样式是会直接生效的,由于直接写到行内里面,权重仅次于important;