<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 = ; 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 = ; 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必须放在一行样式的末尾并且要放在该行分号前,否则就没有效果。

input点击修改样式的更多相关文章

  1. vue 点击修改样式

    1.页面加载默认一个初始的isact,让第二个div.f具有一个on的类:在点击的时候,传入一个值给data.isact <template> <nav class="cl ...

  2. 对input type=file 修改样式

    效果图先给: 在html中涉及到文件选择的问题,文件选择使用 input(class="filter_input form-control" type="file) 但是 ...

  3. 使用<label>标签修改input[type="checkbox"]的样式

    因为<label>的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上. <form> <input type=" ...

  4. input选择框默认样式修改

    input选择框是无法直接修改样式,我们只能间接来改变它样式. 原理:用图片来代替原来的input选择框,原来的input选择框定位到图片上方并让它opacity为0,鼠标点击时用js来改变图片,这样 ...

  5. 修改input属性placeholder的样式

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目

    ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml)   我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...

  7. 微信小程序弹框wx.showModal如何修改样式

    由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框. wx.showModal修改样式后的效果,如 ...

  8. js实现点击修改按钮之后单元格变成可编辑状态

    主要实现原理: 每一行有一个修改按钮 点击修改之后,获取行对象,通过行对象再获取行中单元格数组.然后把每一个单元格中的innerHTML替换成input输入框,并赋值value=原来单元格中的内容,鼠 ...

  9. 自定义input[type="radio"]的样式

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: <fo ...

随机推荐

  1. 关于在win7旗舰版32位上 安装 net4.0 的闪退问题研究 和安装sqlserver2008问题

    1.配置文件客户端[目标x86x64]的 可以安装 2.配置文件完全的目标x86x64的 出现闪退. 3.服务器核心的出现无法安装 安装 sqlserver 2008R2数据库 报错 \最后留下了它, ...

  2. python dns请求

    一.DNS dns(domain name system)域名系统 ,主要用来把主机名转换成ip地址.其至今能存在的原因有两个: 能使人们记住名字,而不是ip地址: 允许服务器改变地址,但使用相同的名 ...

  3. STL中队列queue的用法

    头文件:#include <queue> 建立一个队列queue < 类型 > q 加入一个新的元素q.push(a) 询问队首元素q.front() 弹出队首元素q.pop( ...

  4. 20180429NOIP提高组精英班Day1测试

  5. NOIP2018 滚粗记

    Day -2  上午,大家都在复习各种模板,zhx总结了足足67个模板(杨辉三角也算模板???),lgl死磕FFT发现cos和sin打反了,我也是复习板子和以前做过的题,几乎没有人颓. 接着jdr,l ...

  6. copy the content of a file muliptle times and save as ordered files:

    input: transient.case outputs: transient_1.case, transient_2.case,...transient_101.case ********** n ...

  7. LINUX 查看硬件配置命令

      系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # ...

  8. 从零搭建流媒体服务器+obs推流直播

    背景介绍 本文使用的流媒体服务器的搭建是基于rtmp(Real Time Message Protocol)协议的,rtmp协议是应用层的协议,要依靠底层的传输层协议,比如tcp协议来保证信息传输的可 ...

  9. 有用的生活有关的website

    1. 如何快速download mpa3 from youtube a. google "youtube download" 2. 打开https://y2mate.com 3. ...

  10. mbr gpt

    超过2T硬盘的磁盘要用gpt格式,准确地说,应该是分区超过2T地硬盘要选用GPT模式. 做个小推广:程序员经常久坐,颈椎毛病比较多,特别推荐ventry颈椎保健枕