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 ...
随机推荐
- seam的定时轮巡
青岛的项目要做一个功能,每天凌晨2点的时候保存一次设备数据,这个就要求项目能够间隔24小时每天去做这个事,是一个自主轮巡. seam框架正好提供了这个功能,@Expiration指定开始时间,@Int ...
- Origin C调用GSL
GSL (GNU Scientific Library, http://www.gnu.org/software/gsl/)是C.C++的数值算法库,提供了范围宽广的数学程序,包括随机数字生成器.数理 ...
- PHP 设计模式--序言
面向对象是PHP5之后增加的功能,是PHP走向现代语言的一个标志. 在过程式设计时代,PHP以学习成本低.入门快的特点赢得很多WEB开发者的青睐,但同时也限制了PHP的发展. 借鉴Java和C++之后 ...
- 《Mysql - 到底可不可以使用 Join ?》
一:Join 的问题? - 在实际生产中,使用 join 一般会集中在以下两类: - DBA 不让使用 Join ,使用 Join 会有什么问题呢? - 如果有两个大小不同的表做 join,应该用哪个 ...
- PAT 1097. Deduplication on a Linked List (链表)
Given a singly linked list L with integer keys, you are supposed to remove the nodes with duplicated ...
- 基于Python3.7和opencv的人脸识别(含数据收集,模型训练)
前言 第一次写博客,有点紧张和兴奋.废话不多说,直接进入正题.如果你渴望使你的电脑能够进行人脸识别:如果你不想了解什么c++.底层算法:如果你也不想买什么树莓派,安装什么几个G的opencv:如果你和 ...
- 【郑轻邀请赛 E】Can Win
[题目链接]:https://acm.zzuli.edu.cn/zzuliacm/problem.php?id=2131 [题意] [题解] 尽量让自己喜欢的队赢; A内组内的比赛都让自己喜欢的队赢; ...
- Spring Boot静态资源处理
Spring Boot静态资源处理 8.8 Spring Boot静态资源处理 当使用Spring Boot来开发一个完整的系统时,我们往往需要用到前端页面,这就不可或缺地需要访问到静态资源,比如图片 ...
- [cogs729] [网络流24题#5] 圆桌聚餐 [网络流,最大流,多重二分图匹配]
建图:从源点向单位连边,边权为单位人数,从单位向圆桌连边,边权为1,从圆桌向汇点连边,边权为圆桌容量. #include <iostream> #include <algorithm ...
- TSP服务商
1.何为TSP? TSP([1] Service Provider),在Telematics产业链居于核心地位,上接汽车.车载设备制造商.网络运营商,下接内容提供商.谁掌控了TSP,谁就能掌握Tele ...