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加ASP二级域名转向的代码
May 17 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
这段js代码得节约你多少时间
Dec 20 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 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 serialize()与unserialize()的用法
2013/06/05 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
PHP CURL使用详解
2019/03/21 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
Js获取事件对象代码
2010/08/05 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
有关环保的标语
2014/06/13 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
企业宣传稿范文
2015/07/23 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android