zoukankan      html  css  js  c++  java
  • input点击修改样式

    <input id="geren" type="button" value="个人奖励"   style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none;48%">
        <input id="bumen" type="button" value="部门奖励" style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none;48%">

    两个input 点击触发查事件并加入新的样式

    <style>
            /**
            加下划线
            */
    
    
            .xiahua
            {
                BORDER-BOTTOM-STYLE: solid !important;
            }
    
            /*.noxiahua*/
            /*{*/
                /*BORDER-BOTTOM-STYLE: none !important;*/
            /*}*/
    
    
        </style>

    加入代码添加样式

    <script>
        $("#bumen").click(function(){
            $("#bumen").addClass("xiahua");
            $("#geren").removeClass("xiahua");
            $.ajax({
                type:"post",
                url:"/selectOneselectOnejian.do",
                success:function(data){
                    if(data.success){
                        for(var i = 0 ; i<data.data.length;i++){
                            $("#ge").empty();
                            $('#ge').append("<h5><span style=' style='color: #282828''>用户:</span>"+data.data[i].jiali+"</h5>" +
                                "<div class='mui-input-row mui-password'>" +
                                "</div>" +
                                "<h5><span style=' style='color: #282828''>记录:</span>"+data.data[i].content+"</h5>" +
                                "<div class='mui-input-row mui-password'>" +
                                "</div>" +
                                "<h5><span style=' style='color: #282828''>积分:</span>"+data.data[i].jifen+"</h5>" +
                                "<div class='mui-input-row mui-password'>" +
                                "</div>" +
                                "<h5><span style=' style='color: #282828''>时间:</span>"+data.data[i].time+"</h5>" +
                                "<div class='mui-input-row mui-password'>" +
                                "</div>" +
                                "</div>"+
                                "<hr style='height:1px;border:none;border-top:1px solid #282828;'/>"
                            );
                        }
                    }else{
                        $("#ge").empty();
                        $('#ge').append("<h5><span style=' style='color: #282828''>无记录</span></h5>" );
                    }
                },
                error:function(){}
            })
    
        })
    
    
    </script>
    
    <script>
        $("#geren").click(function(){
            //$("#bumen").addClass("noxiahua");
            $("#bumen").removeClass("xiahua");
            $("#geren").addClass("xiahua");
            $("#ge").empty();
            $.ajax({
                type:"post",
                url:"/selectOnejiangli.do",
                success:function(data){
                    if(data.success){
                        $("#ge").empty();
                        for(var i = 0 ; i<data.data.length;i++){
                            $('#ge').append("<h5><span style=' style='color: #282828''>用户:</span>"+data.data[i].jiali+"</h5>" +
                                "<div class='mui-input-row mui-password'>" +
                                "</div>" +
                                "<h5><span style=' style='color: #282828''>记录:</span>"+data.data[i].content+"</h5>" +
                                "<div class='mui-input-row mui-password'>" +
                                "</div>" +
                                "<h5><span style=' style='color: #282828''>积分:</span>"+data.data[i].jifen+"</h5>" +
                                "<div class='mui-input-row mui-password'>" +
                                "</div>" +
                                "<h5><span style=' style='color: #282828''>时间:</span>"+data.data[i].time+"</h5>" +
                                "<div class='mui-input-row mui-password'>" +
                                "</div>" +
                                "</div>"+
                                "<hr style='height:1px;border:none;border-top:1px solid #282828;'/>"
                            );
                        }
                    }else{
                        $("#ge").empty();
                        $('#ge').append("<h5><span style=' style='color: #282828''>无记录</span></h5>" );
                    }
                },
                error:function(){}
            })
    
        })
    </script>

    一、语法
    选择器{样式:值!import;}
    二、说明
    提升指定样式规则的应用优先权,即!important为开发者提供了一个增加样式权重的方法,让浏览器首选执行这个语句。

    例如下面这个样式:

    .xiahua
    {
    BORDER-BOTTOM-STYLE: solid !important;
    }
     

    如果是在除了IE6的浏览器中,这些浏览器支持!important属性,也就是说他们会默认让margin-left:20px!important; 这条语句生效,下面的不带!important声明的样式将不会覆盖它,换句话说就是他的级别最高,下面的人都不能取代我!
    在IE6及以下浏览器有个比较显式的支持问题存在,!important在同一条规则集里不生效。请看下述代码:

    div {
         margin-left:20px!important;
    }
    div {
         margin-left:40px;
    }

    在上述代码中,IE6及以下浏览器中div的margin-left与其它浏览器一致,都为20px;
    注意:
    1、IE6及更早浏览器下,!important在同一条规则集内不生效。
    2、如果!important被用于一个简写的样式属性,那么这条简写的样式属性所代表的子属性都会被作用上!important。
    3、关键字!important必须放在一行样式的末尾并且要放在该行分号前,否则就没有效果。

  • 相关阅读:
    windows :Tomcat免安装版环境变量配置 + jdk配置
    如何在官网下载Spring jar包
    浅析win32 Win64 x86 x64 区别 及Eclipse启动报Java was started but returned exit code=13 错误
    MyBatis拦截器打印不带问号的完整sql语句方法
    MyBatis多个接口参数报错:Available parameters are [0, 1, param1, param2], 及解决方法
    Leetcode40--->Combination Sum II
    Leetcode39--->Combination Sum(在数组中找出和为target的组合)
    Leetcode38--->Count and Say
    js 保留小数位数
    如何禁用easyui-linkbutton 中的Click事件
  • 原文地址:https://www.cnblogs.com/NCL--/p/9083428.html
Copyright © 2011-2022 走看看