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 相关文章推荐
jquery 批量上传图片实现代码
Jan 28 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
js中的数组对象排序分析
Dec 11 Javascript
vue实现登录拦截
Jun 29 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 静态页面中显示动态内容
2009/08/14 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
Python中删除文件的程序代码
2011/03/13 Python
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
Python读取csv文件实例解析
2019/12/30 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
python自动生成sql语句的脚本
2021/02/24 Python
Python与C/C++的相互调用案例
2021/03/04 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
公司业务主管岗位职责
2013/12/07 职场文书
家长会演讲稿范文
2014/01/10 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
优秀护士事迹材料
2014/12/25 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
Python开发五子棋小游戏
2022/05/02 Python
Linux中sftp常用命令整理
2022/06/28 Servers