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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
javascript动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
webpack入门+react环境配置
Feb 08 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 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 empty函数 使用说明
2009/08/10 PHP
PHP面向对象概念
2011/11/06 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
python将字母转化为数字实例方法
2019/10/04 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
个人先进材料范文
2014/12/30 职场文书
教师个人成长总结
2015/02/11 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
绿里奇迹观后感
2015/06/15 职场文书
个人合作协议范本
2015/08/06 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android