JQuery为元素添加样式的实现方法
由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好
为定义好的css样式可以调用元素的css方法添加样式
$("span").css("css属性名","属性值")
如 $("span").css("color","red") 将标签为span的字体都设为红色的
$("#id") $("span")
如果是定义好的css样式,可以通过addClass来添加,比如
<style type=
"text/css"
>
.aa
{
border:1px solid red;
}
</style>
$(
"#txtName"
).addClass(
"aa"
);
<input id=
"txtName"
type=
"text"
value=
"请输入你的姓名"
/>
下面列举下对css样式操作的方法:
1、.css("样式"):获得样式值,比如$("input").css("color") 获得input中字体的颜色
2、.css("样式","value"):为样式赋值,如$("input").css("color","red");
3、.addClass("样式类1,样式类2,样式类3"):可以添加多个定义好的样式类
4、.hasClass("样式类类"):判断是否存在该样式
5、.toggleClass("样式类"):如果存在(不存在)就切换(删除)样式
6、.toggleClass("样式类",swith):如果swith为false,则删除样式,如果swith为true,则切换成该类
7、removeClass("样式类"):移除样式类
8、.css({样式名:"value",样式名:"value",样式名:"value"}):可以多次添加样式
当然还有很多方法,这些等用到的时候查查api就可以了!
以上这篇JQuery为元素添加样式的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
JQuery为元素添加样式的实现方法的更多相关文章
- jquery给元素添加样式表的方法
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- JQuery为元素添加样式
由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...
- select元素添加option的add()方法 | try{}catch{}
1.javascript中的select元素添加option使用add()方法 select的add方法,第一个参数是需要被添加的option元素,第二个参数决定了被添加的位置 普通浏览器中,第二个参 ...
- border-radius是向元素添加圆角边框的方法
border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角.右上角.右下角和左下 ...
- jquery阻止元素冒泡的两种方法
通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...
- jquery判断元素是否隐藏的多种方法
第一种:使用CSS属性 复制代码 代码如下: var display =$('#id').css('display'); if(display == 'none'){ alert("被 ...
- H5在js中向指定的元素添加样式
今天在做一个按钮的功能控制,点击之后,要根据判断条件,修改按钮的样式,然后就发现了一个巨好用的方法, <button type="button" id="btn_A ...
- jQuery 动态元素添加
有这么一道题 <!DOCTYPE html> <head> <title>前端工程师面试题</title> <meta http-equiv=&q ...
- Vue给元素添加样式
Vue中使用样式 绑定css 数组 <style> .red{ color:red } .thin{ font-size:18px } </style> <h1 :cla ...
随机推荐
- hdoj1010 Temperor of the bone
Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Othe ...
- NSIS安装程序制作工具判断系统是否安装.NET
前段时间忙了很久的系统总算上线了,由于是WinForm程序不能整个文件夹的发给客户使用.所以必须要打包,记得以前在VS2005中是自带部署功能的.现在换了VS2013那个部署功能完全弄不清方向.最后在 ...
- 开发song-list组件;
注意点: 1.song-list的高度是通过计算动态获取的: 2.可以直接在{{}}调用函数,来显示函数的返回值: <template> <div class="song- ...
- C#中一道关于ADO.NET的基础练习题
在控制台程序中实现以下功能: 1. 构建3个表(程序启动时自动建立) (20分): 1) Employee 职工表 (工号.姓名.性别.年龄.部门) (Num.Name.Sex.Age.Depar ...
- 一款html5和css3实现的小机器人走路动画
之前介绍了好多款html5和css3实现的动画,今天要给大家带来一款html5和css3实现的小机器人走路动画.该实例的人物用html5绘画的,动画效果是html5和css3实现的.一起看下效果图. ...
- aspx小集合
1.注意GroupName <asp:RadioButton ID="rdoF" runat="server" Text="男" Ch ...
- Android--List与ArrayList区别(转)
转载自:http://www.cnblogs.com/aisiteru/articles/1151874.html List是一个接口,而ArrayList是一个类. ArrayList继承并实现了L ...
- Hadoop日志分析工具——White Elephant
White Elephant 是一个Hadoop日志收集器和展示器,它提供了用户角度的Hadoop集群可视化.White Elephant 是全球最大的职业社交网站Linkedin开发的一套分析Had ...
- oracle数据库表空间的创建与使用
以下操作请使用sys系统账号操作! 1. 查询物理存储的位置 SELECT tablespace_name, file_id, file_name, round(bytes / (1024 * 10 ...
- laravel 5.1 的程序性能优化(配置文件)
命令优化 本文的目的是来弄清楚一些优化命令在 Laravel 5.1 和之前版本之间的差别. 在 15年6月发布的 Laravel 5.1版本中, 命令和他们的逻辑方法被清理掉, 本文章就是描述这些不 ...