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. DNS message解析

    案例吐个槽,命苦啊,要自己动手解包. 另外,这里的内容是半路找来的,如果有冲突,自行翻阅rfc1035.我还没校正过. The Structure 如下图: 所有的DNS message都包含了下面这 ...

  2. python小写转大写金额

    python小写转大写金额 摘自:http://shine-it.net/index.php?topic=14575.0 def _rmb_upper(self, value): "&quo ...

  3. SQLiteOpenHelper 源码

    package com.tongyan.common.db; /** * Copyright (C) 2007 The Android Open Source Project * * Licensed ...

  4. 【Linux】xshell连接中断后就无法连接虚拟机中的Linux

    具体情景是这样的: 在使用Linux的时候,本来一直好好的,突然就断了,我去百度了一番,网上的说法有千万种 有的说:是由于防火墙的问题 有的说:是由于Linux与其他ip冲突造成 ... 说法千万种, ...

  5. 【搞机】Apple Pencil 开箱

    前言 上次入手了新的iPad Pro .好开心呢. 然后发现官方的笔不错呢~ 后来,苹果官方的12期免息分期又回来啦~ 买买买!!! 上图 体验 官方的笔真的不愧叫Pencil ,完美模拟铅笔的手感. ...

  6. html5_storage存取实例

    <script src="jquery-1.8.3.js"></script><script>function set(){    var tt ...

  7. SQL SERVER 2005中利用XML对字符串拆分的方法

    1.常规方法(可运用于SQL SERVER 2000中) DECLARE @str varchar(1000) DECLARE @idoc int; DECLARE @doc xml;set @str ...

  8. THINKPHP3.2视频教程

    http://edu.51cto.com/lesson/id-24504.html lunix视频教程 http://bbs.lampbrother.net/read-htm-tid-161465.h ...

  9. centos6.x 抓取ssh登录的用户名和密码

    systemtap是一款非常强大内核调试工具,可以debug很多关于kernel层的问题.Linux是通过PAM模块检测用户信息和认证信息的,从而确定一个用户是否可以登录系统,利用这个知识点,使用sy ...

  10. [JNA系列]Java调用Delphi编写的Dll之实例Delphi使用PAnsiChar

    Delphi代码 unit UnitDll; interface uses StrUtils, SysUtils, Dialogs; function DoBusinessAnsi(pvData: P ...