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 = ; 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点击修改样式的更多相关文章
- vue 点击修改样式
1.页面加载默认一个初始的isact,让第二个div.f具有一个on的类:在点击的时候,传入一个值给data.isact <template> <nav class="cl ...
- 对input type=file 修改样式
效果图先给: 在html中涉及到文件选择的问题,文件选择使用 input(class="filter_input form-control" type="file) 但是 ...
- 使用<label>标签修改input[type="checkbox"]的样式
因为<label>的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上. <form> <input type=" ...
- input选择框默认样式修改
input选择框是无法直接修改样式,我们只能间接来改变它样式. 原理:用图片来代替原来的input选择框,原来的input选择框定位到图片上方并让它opacity为0,鼠标点击时用js来改变图片,这样 ...
- 修改input属性placeholder的样式
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 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的返回值自动进行各种序列化处理(序列化为 ...
- 微信小程序弹框wx.showModal如何修改样式
由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框. wx.showModal修改样式后的效果,如 ...
- js实现点击修改按钮之后单元格变成可编辑状态
主要实现原理: 每一行有一个修改按钮 点击修改之后,获取行对象,通过行对象再获取行中单元格数组.然后把每一个单元格中的innerHTML替换成input输入框,并赋值value=原来单元格中的内容,鼠 ...
- 自定义input[type="radio"]的样式
对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: <fo ...
随机推荐
- PHP 之中文转为拼音
/** * Created by PhpStorm. * User: Administrator * Date: 2019/1/2 0002 * Time: 下午 1:01 */ class PinY ...
- 利用shell脚本去备份幸运28源码搭建下载所指定的数据库
#! /bin/bash幸运28源码搭建下载Q[115288oo99]logintool=/home/yx/server/mysql/mysql/bin/mysqldumptool=/home/yx/ ...
- 破解js中的this指向
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...
- H5 web存储
H5提供了两种在客户端存储数据的方式:localStorage 持久化的本地存储(浏览器关闭重新打开数据依然存在)sessionStorage 针对一个session的本地存储之前这些都是由cooki ...
- tp5 微信支付开发流程
1.用户在选择商品后,向APi提交包含它所选择商品的相关信息. 2.APi在接收到信息后,需要检查订单相关商品的库存量. 3.有库存,把订单数据存入数据库中= 下单成功了,返回客户端消息,告诉客户端可 ...
- <embed> 标签
<embed> 标签定义嵌入的内容,比如插件. <embed quality="high" bgcolor="#FFF" wmode=&quo ...
- Java基础学习总结(42)——Log4j 2使用教程
1. 去官方下载log4j 2,导入jar包,基本上你只需要导入下面两个jar包就可以了(xx是乱七八糟的版本号): log4j-core-xx.jar log4j-api-xx.jar 2. 导入到 ...
- AndroidTreeView:Android树形节点View
AndroidTreeView:Android树形节点View AndroidTreeView是github上的一个第三方开源项目,其在github上的项目主页是:https://github. ...
- Luogu P3740 [HAOI2014] 贴海报 线段树
线段树版的海报 实际上这个与普通的线段树相差不大,只是貌似数据太水,暴力都可以过啊 本来以为要离散的,结果没打就A了 #include<iostream> #include<cstd ...
- ZooKeeper环境搭建(单机/集群)(转)
前提: 配置文件主要是在$ZOOKEEPER_HOME/conf/zoo.cfg,刚解压时为zoo_sample.cfg,重命名zoo.cfg即可. 配置文件常用项参考:http://www.cnbl ...