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 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
jquery下操作HTML控件的实现代码
Jan 12 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
vue实现鼠标经过动画
Oct 16 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
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
php实现等比例压缩图片
2018/07/26 PHP
List Installed Software Features
2007/06/11 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
基于JavaScript实现网页倒计时自动跳转代码
2015/12/28 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
python33 urllib2使用方法细节讲解
2013/12/03 Python
Python计算一个文件里字数的方法
2015/06/15 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Python变量赋值的秘密分享
2018/04/03 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Numpy中的mask的使用
2018/07/21 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
用Python实现数据的透视表的方法
2018/11/16 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
董事长秘书岗位职责
2013/11/29 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
小学生春游活动方案
2014/08/20 职场文书
摘录式读书笔记
2015/07/01 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
python识别围棋定位棋盘位置
2021/07/26 Python