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 相关文章推荐
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
document.createElement()用法
Mar 13 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 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
一个查看session内容的函数
2006/10/09 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
PHP计数器的实现代码
2013/06/08 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
ext 代码生成器
2009/08/07 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
Python代码的打包与发布详解
2014/07/30 Python
简单介绍Python中的JSON模块
2015/04/08 Python
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
python中PIL安装简单教程
2016/04/21 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
详解Django配置JWT认证方式
2020/05/09 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
python对execl 处理操作代码
2020/06/22 Python
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
团支书的期末学习总结自我评价
2013/11/01 职场文书
应届毕业生应聘自荐信
2013/12/07 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
优秀教师个人材料
2014/12/15 职场文书
自我工作评价范文
2015/03/06 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android