jQuery操作CSS也是很方便的，咱先看看这几个常用的方法：

  • addClass()：向一个元素添加一个或者多个类。
  • removeClass()：从一个元素中删除一个类或多个类。
  • toggleClass：对元素进行 添加/删除(切换方式) 某个类。
  • css()：设置或返回元素的css样式。

1 添加Class

<!DOCTYPE html>

<html>

<head>

    <title>learn javascript</title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style type="text/css">

        .red{

            color : red;

        }

        .paragraph{

            font-weight: bold;

            font-size: xx-large;

        }

    </style>

</head>

<body>

<div class="demo">

    <p id="p1">一些内容</p>

    <p id="p2">另一个文本</p>

</div>

<button id="btn1">添加Class</button>

</body>

{{--js--}}

<script>

    $(document).ready(function() {

        $("#btn1").click(function () {

            $("#p1,#p2").addClass("red paragraph");

        });

    });

</script>

</html>

2 删除Class

<!DOCTYPE html>

<html>

<head>

    <title>learn javascript</title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style type="text/css">

        .red{

            color : red;

        }

        .paragraph{

            font-weight: bold;

            font-size: xx-large;

        }

    </style>

</head>

<body>

<div class="demo">

    <p id="p1" class="red paragraph">一些内容</p>

    <p id="p2" class="red paragraph">另一个文本</p>

</div>

<button id="btn1">删除Class</button>

</body>

{{--js--}}

<script>

    $(document).ready(function() {

        $("#btn1").click(function () {

            $("#p1,#p2").removeClass("red paragraph");

        });

    });

</script>

</html>

3 切换Class

<!DOCTYPE html>

<html>

<head>

    <title>learn javascript</title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style type="text/css">

        .red{

            color : red;

        }

        .paragraph{

            font-weight: bold;

            font-size: xx-large;

        }

    </style>

</head>

<body>

<div class="demo">

    <p id="p1" class="red paragraph">一些内容</p>

    <p id="p2" class="red paragraph">另一个文本</p>

</div>

<button id="btn1">切换Class</button>

</body>

{{--js--}}

<script>

    $(document).ready(function() {

        $("#btn1").click(function () {

            $("#p1,#p2").toggleClass("red paragraph");

        });

    });

</script>

</html>

4 设置或返回CSS

4.1 返回CSS

返回一个css 我们只需要在css方法中写出要获取的css类型就好。

    $(document).ready(function() {

        $("#btn1").click(function () {

            alert($("#p1").css("background-color"));

        });

    });

4.2 设置CSS

我们可以设置一个或多个css样式：

<script>

    $(document).ready(function() {

        $("#btn1").click(function () {

            $("#p1").css("background-color", "black");

            $("#p2").css({"background-color": "black", "color": "white"});

        });

    });

</script>

jQery 操作CSS的更多相关文章

  1. jQuery 操作 CSS

    jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleCl ...

  2. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  3. JQuery：JQuery操作CSS类

    JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...

  4. JS操作css的float属性的特殊写法

    使用js操作css属性的写法是有一定的规律的: 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.sty ...

  5. jQuery操作css样式

    jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...

  6. jQuery系列 第三章 jQuery框架操作CSS

    第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...

  7. jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  8. js操作css样式，null和undefined的区别？

    1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...

  9. 11-13 js操作css样式

    1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...

随机推荐

  1. 课程分享 企业普及版贝斯OA与工作流系统

    企业普及版贝斯OA与工作流系统 基于J2EE+JBPM3.x/JBPM4.3+Flex流程设计器+Jquery+授权认证企业普及版贝斯OA与工作流系统 假设对这个课程有兴趣的.能够和我联系.QQ205 ...

  2. vs2017安装过程问题及解决方法

    1. 问题:C++ 无法打开 源 文件 "errno.h"等文件 解决方法:https://jingyan.baidu.com/article/8ebacdf0167b2249f6 ...

  3. JSR 303 - Bean Validation 介绍及最佳实践(转)

    JSR 303 – Bean Validation 是一个数据验证的规范,2009 年 11 月确定最终方案.2009 年 12 月 Java EE 6 发布,Bean Validation 作为一个 ...

  4. Asp.Net MVC中递归死循环问题

    在写代码的时候,很欢乐地发现报错了. An unhandled exception of type 'System.StackOverflowException' occurred in mscorl ...

  5. 使用AsParallel 进行并行化处理数据

    using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...

  6. socket.io（转载）

    socket.io 中文手册,socket.io 中文文档转载于:http://www.cnblogs.com/xiezhengcai/p/3956401.html 服务端 io.on(‘connec ...

  7. 有关linux磁盘分区优化

    Linux中几个重要的目录,这几个目录在ubuntu安装的硬盘分区时,可选择性的特别分区,进行挂载./usr 文件系统中一般不改变的文件,如库,程序./var 文件系统包含会改变的文件./home 文 ...

  8. HTTP 用户认证

    HTTP 常见的用户认证可以分为下面三种: 基于IP,子网的访问控制(ACL) 基本用户验证(Basic Authentication) 消息摘要式身份验证(Digest Authentication ...

  9. google_gflags使用

    gflags是google开源的一个解析命令行参数的工具. 最简单的demo #include <iostream> #include <gflags/gflags.h> us ...

  10. 河南省第七届ACM程序设计大赛赛后总结

    我们学校ACM集训开始于4月5号(清明节),5月25日在郑州解放军信息工程大学举办,集训耗时50天,但是感觉效果还行,但是也不是太好:我们也已经尽力了,虽然说只拿了个银牌,每份收获的背后,都会有辛勤的 ...