由于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"}):可以多次添加样式

转自:http://www.cnblogs.com/shuang121/archive/2011/05/10/2042696.html

JQuery为元素添加样式的更多相关文章

  1. JQuery为元素添加样式的实现方法

    由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...

  2. jquery给元素添加样式表的方法

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  3. H5在js中向指定的元素添加样式

    今天在做一个按钮的功能控制,点击之后,要根据判断条件,修改按钮的样式,然后就发现了一个巨好用的方法, <button type="button" id="btn_A ...

  4. jQuery 动态元素添加

    有这么一道题 <!DOCTYPE html> <head> <title>前端工程师面试题</title> <meta http-equiv=&q ...

  5. Vue给元素添加样式

    Vue中使用样式 绑定css 数组 <style> .red{ color:red } .thin{ font-size:18px } </style> <h1 :cla ...

  6. jquery点击添加样式,再点击取出样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. css为第几个倍数元素添加样式

    //3n就是3的倍数都加这个样式*/.list li:nth-child(3n){ border-bottom:1px;}

  8. js实现元素添加样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery点击添加样式,再次点击移除样式

    $("#divSetting").on("click", function () { $(this).toggleClass("open") ...

随机推荐

  1. Cocos2d-x之Touch事件处理机制

    一.两种机制的四种不同的事件 CCStandardTouchDelegate 默认事件   virtual void ccTouchesBegan(CCSet *pTouches, CCEvent * ...

  2. asp遇到的一些问题

    1.伪静态问题...后台设置支持, 2.数据库链接错误,也就是说  .net 功能冲突,要后台关闭 3.本机也可以设置 iis服务器 win7配置自己的IIS服务器亲自做的图文很详细 http://j ...

  3. Nginx【第一篇】安装

    一.简介 Nginx("engine x")是一款是由俄罗斯的程序设计师 Igor Sysoev 所开发高性能的 Web 和 反向代理 服务器,也是一个 IMAP/POP3/SMT ...

  4. Android(java)学习笔记153:layout_weight使用注意事项

    1. android:layout_weight使用说明: layout_weight是权重的意思,也就是各个控件所占的比重,用在LinearLayout布局中.当我们使用layout_weight的 ...

  5. angularjs填写表单

    https://scotch.io/tutorials/handling-checkboxes-and-radio-buttons-in-angular-forms <!DOCTYPE html ...

  6. create---创建表

    create table table_name (列名 数据类型 是否非空 约束信息, 列名 数据类型 是否非空 约束信息, 列名 数据类型 是否非空 约束信息, ........); 例: crea ...

  7. CentOS7使用VPN上网

    安装epel源 $ sudo yum install epel-release 安装软件包 $ sudo yum install NetworkManager-pptp NetworkManager- ...

  8. hibernate篇章五--Hibernage工作原理

    Hibernage工作原理: 1.配置hibernate对象关系映射文件.启动服务器 2.服务器通过实例化Configuration对象,读取hibernate.cfg.xml文件的配置内容,并根据相 ...

  9. HTML表单元素中disabled的元素的值不会提交到服务器

    一.在HTMl页面的form表单中对disabled的元素的属性和值不会提交到服务器 实例1: <form action="#"> <input type=&qu ...

  10. Java 十六进制转十进制

    public static int hexToDecimal(String hex) { int decimalValue = 0; for (int i = 0; i < hex.length ...