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获取复选框被选中的值
Mar 22 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
JS实现页面打印功能
Mar 16 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
利用JavaScript写一个简单计算器
Nov 27 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
Python 去除字符串中指定字符串
2020/03/05 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
与UNIX有关的几个名词
2015/09/17 面试题
旅游专业职业生涯规划范文
2014/01/13 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
新年晚会主持词
2014/03/24 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
销售员自我评价
2015/03/11 职场文书
黄河绝恋观后感
2015/06/08 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python