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 相关文章推荐
Javascript中的arguments与重载介绍
Mar 15 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
Vue实现购物车功能
Apr 27 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
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中用数组的方法设置cookies
2011/04/21 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
laravel学习教程之存取器
2016/07/30 PHP
自定义jQuery选项卡插件实例
2013/03/27 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
JavaScript实现新年倒计时效果
2018/11/17 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
如何在python中使用selenium的示例
2017/12/26 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
pandas中ix的使用详细讲解
2020/03/09 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
法国珠宝店:CLEOR
2017/01/29 全球购物
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
入党积极分子考察意见
2015/06/02 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
七个Python必备的GUI库
2021/04/27 Python