JQuery为元素添加样式的实现方法


Posted in Javascript onJuly 20, 2016

由于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为元素添加样式的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
json 入门基础教程 推荐
Oct 31 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
将json对象转换为字符串的方法
Feb 20 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 #Javascript
javaScript给元素添加多个class的简单实现
Jul 20 #Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 #Javascript
JavaScript DOM 对象深入了解
Jul 20 #Javascript
JavaScript中的splice方法用法详解
Jul 20 #Javascript
Bootstrap被封装的弹层
Jul 20 #Javascript
必备的JS调试技巧汇总
Jul 20 #Javascript
You might like
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
django框架使用方法详解
2019/07/18 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
python 错误处理 assert详解
2020/04/20 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
房地产还款计划书
2014/01/10 职场文书
九年级英语教学反思
2014/01/31 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
党员转正介绍人意见
2015/06/03 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript