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 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
javascript 设置文本框中焦点的位置
Nov 20 Javascript
JS小框架 fly javascript framework
Nov 26 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
js实现select下拉框选择
Jan 11 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
模仿OSO的论坛(四)
2006/10/09 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
Yii分页用法实例详解
2014/12/04 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
PHP crc32()函数讲解
2019/02/14 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
面包店的创业计划书范文
2014/01/16 职场文书
小学生美德少年事迹
2014/02/02 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
有趣的广告词
2014/03/18 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
食品安全演讲稿
2014/09/01 职场文书
离婚协议书范本
2015/01/26 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
我的1919观后感
2015/06/03 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
nginx.conf配置文件结构小结
2022/04/08 Servers