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 相关文章推荐
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
js验证是否为数字的总结
Apr 14 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
react的hooks的用法详解
Oct 12 Javascript
vue实现倒计时功能
Mar 24 Vue.js
Axios取消重复请求的方法实例详解
Jun 15 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
Smarty分页实现方法完整实例
2016/05/11 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
js实现进度条的方法
2015/02/13 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
django框架模板语言使用方法详解
2019/07/18 Python
利用python实现AR教程
2019/11/20 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
Python爬取网页信息的示例
2020/09/24 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
python 实现音频叠加的示例
2020/10/29 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
会计自我鉴定
2013/11/02 职场文书
商业活动邀请函
2014/02/04 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
公司费用报销管理制度
2015/08/04 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js
nginx中proxy_pass各种用法详解
2021/11/07 Servers
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers