JQuery:CSS()方法
jQuery css()方法：css()方法设置或返回被选元素的一个或多个样式属性。
1、返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：
css("propertyname");
下面的例子将返回首个匹配元素的 background-color 值：
实例：$("p").css("background-color");
代码如下：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>

    <script>

        $(document).ready(function(){

            //返回p元素的background-color

            $("button").click(function(){

                alert("p元素的背景色是："+ $("p").css("background-color"));

            });

        });

    </script>

</head>

<body>

    <h2>这是一个标题</h2>

    <p style="background-color:#ff0000">这是一个段落。</p>

    <p style="background-color:#00ff00">这是一个段落。</p>

    <p style="background-color:#0000ff">这是一个段落。</p>

    <button>返回p元素的background-color</button>

</body>

</html>

 

2、设置 CSS 属性
如需设置指定的 CSS 属性，请使用如下语法：
css("propertyname","value");
下面的例子将为所有匹配元素设置 background-color 值：
实例：$("h2").css("background-color","yellow");
代码如下：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>

    <script>

        $(document).ready(function(){

            //设置h2元素的background-color

            $("button").click(function(){

                $("h2").css("background-color","yellow");

            });

        });

    </script>

</head>

<body>

    <h2>这是一个标题</h2>

    <p style="background-color:#ff0000">这是一个段落。</p>

    <p style="background-color:#00ff00">这是一个段落。</p>

    <p style="background-color:#0000ff">这是一个段落。</p>

    <button>设置h2元素的background-color</button>

</body>

</html>

 

3、设置多个 CSS 属性
如需设置多个 CSS 属性，请使用如下语法：
css({"propertyname":"value","propertyname":"value",...});
下面的例子将为所有匹配元素设置 background-color 和 font-size：
实例：$("h2").css({"background-color":"yellow","font-size":"200%"});

代码如下：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>

    <script>

        $(document).ready(function(){

            //设置h2元素的多个css属性

            $("button").click(function(){

                $("h2").css({"background-color":"yellow","font-size":"50%"});

            });

        });

    </script>

</head>

<body>

    <h2>这是一个标题</h2>

    <p style="background-color:#ff0000">这是一个段落。</p>

    <p style="background-color:#00ff00">这是一个段落。</p>

    <p style="background-color:#0000ff">这是一个段落。</p>

    <button>设置h2元素的多个css属性</button>

</body>

</html>

 

JQuery：JQuery 中的CSS()方法的更多相关文章

  1. 使用原生实现jquery中的css方法

    由于jquery放在mobile页面上,有时候还是显得有点大,所以今天尝试使用原生来开发,但是习惯了jquery之后,转用原生开发之后,发现原生中,找不到可以替代jquery的css方法,于是对原生的 ...

  2. jQuery Mobile中$.mobile.buttonMarkup方法使用具体解释

    近期在群里遇到多数网友提到$.mobile.buttonMarkup()方法的使用. 我这里就列了一下api的使用说明,以后大家看博客就能解决这个问题.如有不对的地方,请留言指出! jQuery Mo ...

  3. jQuery ajax中使用serialize()方法提交表单数据示例

    <form id="form"> 输入账号 :<input id="name" type="text" name=&quo ...

  4. Jquery中css()方法获取边框长度

    1. JQuery中可以使用css()方法获取块元素的边框宽度,如下: $("divMode").css("border-left-width");//左边框长 ...

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

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

  6. jQuery中的ready方法及实现按需加载css,js

    模拟jQuery中的ready方法及实现按需加载css,js 一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的 ...

  7. 在html中引入css、js和jQuery的方法

    在html中引入css代码 在html中插入CSS样式表的方法有三种: 1.外部样式表(External style sheet):即所有的样式单独写在一个.css文件中,在html文件的head部分 ...

  8. 模拟jQuery中的ready方法及实现按需加载css,js

    一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的源码,涉及到的模块比较多,(水平有限)代码比较难看懂:自己结合 ...

  9. 【转发】JQuery中操作Css样式的方法

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

随机推荐

  1. spring+struts2+mybatis

    struts2.2.3 + spring3.1.0 + mybatis3.1.0集成简单demo 项目下载地址:http://download.csdn.net/detail/afgasdg/4171 ...

  2. grep 命令搜索 带空格的字符

    grep - n ' a[[:space:]]b' 就能搜索到 'a    b'类似的字符了 如果要搜索带单引号的 用双引号括起来 如果要搜索带双引号的 用单引号括起来

  3. lightning mdb 源代码分析系列（3）

    本系列前两章已经描述了系统架构以及系统构建的基础内存映射,本章将详细描述lmdb的核心,外存B+Tree的操作.本文将从基本原理.内存操作方式.外存操作方式以及LMDB中的相关函数等几方面描述LMDB ...

  4. HDU 2159 FATE（二维费用背包）

    FATE Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  5. Web交互设计优化的简易check list

    Web交互设计优化的简易check list 00 | 时间: 2011-02-11 | 28,842 Views 交互设计, 用户研究   “优化已有产品的体验”,这是用户体验相关岗位职责中常见的描 ...

  6. RT-Thread的CPU使用率计算

    CPU 的使用率一般是我们比较关心的问题,在这里我们就用空闲线程的钩子函数去统计 CPU 的使用率,并通过串口打印出来.首先我们在初始化线程中设置好钩子函数,并在 LED 线程中给系统人为的加入很多“ ...

  7. jQuery Questions:Front-end Developer Interview Questions

    Explain "chaining". Chaining allows us to run multiple jQuery methods (on the same element ...

  8. Bootstrap页面布局10 - BS代码

    网页中标记代码内容使用code和pre标签 要在HTML中显示标签本来的样子需要转化为实体 在此附上百度的实体字符:http://baike.baidu.com/view/4757776.htm#3 ...

  9. Object-relational mapping

    https://en.wikipedia.org/wiki/Object-relational_mapping Object-relational mapping (ORM, O/RM, and O/ ...

  10. flat file

    Computer Science An Overview _J. Glenn Brookshear _11th Edition The term database refers to a collec ...