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. JavaWeb 发送post请求的2种方式（form、json）

      JavaWeb 发送post请求的2种方式(form.json) CreationTime--2018年6月20日10点15分 Author:Marydon 前提:通过HttpClient来实现 ...

  2. JAVA小项目实例源码—学习娱乐小助手

    代码地址如下:http://www.demodashi.com/demo/11456.html 一.程序实现 项目目录: MyJFrame:实现项目界面样式: AppProcess:实现调用api或爬 ...

  3. 匿名类型 使用泛型T linq返回dynamic类型的匿名实体 如何把匿名类型.GetType()返回的对象传进泛型里面 EF实体查询出的数据List<T>转DataTable出现【DataSet 不支持 System.Nullable<>】的问题

    [100分]紧急求助:LinQ下使用IQueryable<T>如何将返回类型<T>使用匿名类型 问题描述如下:我有一个方法如下:public IQueryable Dissen ...

  4. sql自动增长标识（转载）

    sql自动增长标识   对于一个设了自动增长标识的数据表来说,它的字段的值是由数据库自动设置的:这在导数据时很麻烦.   当我们导数据时,我们往往想想将标识字段的数据也导进来,怎么办呢?   方法有两 ...

  5. python list.remove()，del()和filter &amp; lambda

    面试题之中的一个. 下面代码能执行吗? l = [1,2,3,4,5] for i in range(0,len(l)): print i if l[i] % 2 == 0: del l[i] pri ...

  6. Unity3D_NGUI_性能优化实践_CPU卡顿

    http://gad.qq.com/college/articledetail/7083468 博尔特以9.58秒创造了百米世界纪录,假设他是跑酷游戏的角色,卡顿一帧就足以把冠军拱手让人. Unity ...

  7. Openresty配置文件上传下载

    1. 下载包安装Openresty openresty-1.13.6.1下载地址 https://openresty.org/download/openresty-1.13.6.1.tar.gz 安装 ...

  8. atitit.nfc 身份证 银行卡 芯片卡 解决方案 attilax总结

    atitit.nfc 身份证 银行卡 芯片卡 解决方案 attilax总结 1. nfc(近距离无线通讯技术)  1 2. 工作模式 1 3. NFC 蓝牙 红外具体对比如下表: 2 4. TypeA ...

  9. atitit.软件设计模式大的总结attialx总结

    atitit.软件设计模式大的总结attialx总结 1. 设计模式的历史3 2. 设计模式的数量(253个)3 3. 设计模式的结构4 3.1. 应用场景and条件Context4 3.2. Pro ...

  10. 新标准C++程序设计读书笔记_继承和多态

    简单继承的例子: #include <iostream> #include <string> using namespace std; class CStudent { pri ...