input點擊修改樣式


<input id="geren" type="button" value="個人獎勵"   style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none;width:48%">
    <input id="bumen" type="button" value="部門獎勵" style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none;width: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必須放在一行樣式的末尾並且要放在該行分號前,否則就沒有效果。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM