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 清空form表单中某种元素的值
Dec 26 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
深究AngularJS之ui-router详解
Jun 13 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
CocosCreator入门教程之网络通信
Apr 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
php 将excel导入mysql
2009/11/09 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
解析php入库和出库
2013/06/25 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
Python中的面向对象编程详解(上)
2015/04/13 Python
Python如何实现文本转语音
2016/08/08 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
python中update的基本使用方法详解
2019/07/17 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
判断Python中的Nonetype类型
2021/05/25 Python