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 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
用webpack4开发小程序的实现方法
Jun 04 Javascript
layui中的switch开关实现方法
Sep 03 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安装全攻略:APACHE
2006/10/09 PHP
一些常用的php简单命令代码集锦
2007/09/24 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
详谈PHP编码转换问题
2015/07/28 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
跟老齐学Python之关于类的初步认识
2014/10/11 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
python中有帮助函数吗
2020/06/19 Python
从python读取sql的实例方法
2020/07/21 Python
Django中使用Celery的方法步骤
2020/12/07 Python
python 通过exifread读取照片信息
2020/12/24 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
物业保安员岗位职责
2014/03/14 职场文书
个人工作年终总结
2015/03/09 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS