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. 不吐不快之EJB演练——开篇概述

    EJB(Enterprise Java Bean)是J2EE规范的重要核心,它是一个用户分布式业务应用的标准服务端组件模型,它是一种能够高速开发大规模企业应用的组件体系结构.上面这样官方的解释可能对于 ...

  2. 【Linux】通过传入变量进行数学运算

    一个简单的sum求和 #! /bin/bash ## For get the sum of tow numbers ## Writen by Qinys ## Date:2018-06-26 a=1 ...

  3. Linux下如何修改root密码以及找回root密码

    Linux下修改root密码方法 以root身份登陆,执行: passwd 用户名 然后根据提示,输入新密码,再次输入新密码,系统会提示成功修改密码. 具体示例如下: [root@www ~]# pa ...

  4. Drupal中的模块载入

    什么是模块载入?首先说载入,这里的载入是指require_once.模块载入就是指require_once模块目录中的某个PHP文件. 每个Drupal模块都应该有自己的主文件.模块主文件以模块名开始 ...

  5. CSS3Transition添加多个过渡效果

    本篇文章由:http://xinpure.com/css3transition-to-add-multiple-transition-effects/ 通过监听动画的结束事件,可以为一个元素添加多个动 ...

  6. linux下各种形式的shell加法操作总结

    linux 下shell加法操作总结: #!/bin/bash   n=1;echo -n "$n "   let "n = $n + 1" echo -n & ...

  7. sass 的学习

    导入scss @import "../../sass/variables.scss"; @import "../../sass/helper.scss"; @m ...

  8. FreeSWITCH技巧：如何向通话的另一方号码发送dtmf？

    注:这里的文章都是本人的日常总结,请尊重下个人的劳动成果,转载的童鞋请注明出处,谢谢. 如您转载的文章发生格式错乱等问题而影响阅读,可与本人联系,无偿提供本文的markdown源代码. 联系邮箱:ji ...

  9. Java并发编程（三）：并发模拟（工具和Java代码介绍）

    并发模拟工具介绍 ① Postman : Http请求模拟工具 从图上我们可以看出,Postman模拟并发其实是分两步进行操作的.第一步:左边的窗口,在窗口中设置相关接口以及参数,点击运行进行第二步. ...

  10. Android架构须知

    1.了解不同版本号的特性包含IDE的. 如:AsyncTask3.0之后和之前的差别.Android 5.0的新的API.Android 6.0 不能用HttpClient .AS2.0的新特性 等等 ...