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. lodash merge mergeWith使用

    1.作用 递归合并来源对象的自身和继承的可枚举属性到目标对象. 2.示例 <!DOCTYPE html> <html lang="zh"> <head ...

  2. AngularJS模块具体解释

    模块是提供一些特殊服务的功能块.比方本地化模块负责文字本地化,验证模块负责数据验证.一般来说,服务在模块内部,当我们须要某个服务的时候,是先把模块实例化.然后再调用模块的方法. 但Angular模块和 ...

  3. 【Hadoop】01_从官网下载Hadoop

    在[Linux]Ctentos下载我已经描述了如何去下载Centos 进入到Hadoop官网 http://hadoop.apache.org/ 点击"releases",跳转后, ...

  4. 仿网易/QQ空间视频列表滚动连播炫酷效果

    代码地址如下:http://www.demodashi.com/demo/11201.html 一.准备工作 AndroidStudio 开发环境 需要下载七牛的开源播放器SDK 本例子实现了仿网易/ ...

  5. （五）Lucene——中文分词器

    1. 什么是中文分词器 对于英文,是安装空格.标点符号进行分词 对于中文,应该安装具体的词来分,中文分词就是将词,切分成一个个有意义的词. 比如:“我的中国人”,分词:我.的.中国.中国人.国人. 2 ...

  6. Mybatis准备

    http://www.mybatis.org/mybatis-3/zh/index.html

  7. bootstrap学习笔记一 登录水平表单

    先上效果图: 样式定义: <form class="form-horizontal"> <div class="control-group"& ...

  8. SQL面试题： 数据库中有A B C三列,用SQL语句实现：当A列大于B列时选择A列否则选择B列 ，当B列大于C列时选择B列否则选择C列 ，

    1.用一条sql语句 select (case when a>b then a else b end ),(case when b>c then b esle c end)  from 表 ...

  9. Android 4.4KitKat AudioTrack 流程分析

    Android Audio 系统的主要内容: AudioManager:这个主要是用来管理Audio系统的,需要考虑整个系统上声音的策略问题,例如来电话铃声,短信铃声等,主要是策略上的问题. Audi ...

  10. unity3d创建window

    unity3d创建windwo的方法如下: GUILayout.Window (, new Rect (50, 50, 200, 100), Func1, "窗口1"); 第一个参 ...