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. Ubuntu基础命令

    显示历史命令的时间戳 echo 'HISTTIMEFORMAT="%F %T "' >> ~/.bashrc   解压文件/打包文件夹 tar -zxvf folder ...

  2. Yii2.0 URL美化

    1. 程序初始化注册文件,加入如下: 'urlManager' =>[ 'class' => 'yii\web\UrlManager', 'showScriptName' =>fal ...

  3. HITOJ 2662 Pieces Assignment（状压DP）

    Pieces Assignment My Tags   (Edit)   Source : zhouguyue   Time limit : 1 sec   Memory limit : 64 M S ...

  4. eclipse怎么显示代码行数

    熟悉java开发的朋友们肯定有这样的经验,那就是在用eclipse进行java开发的时候,没有显示代码的行数,这并不利于我们进行程序的调试.今天,小编就来教大家eclipse怎么显示代码行数     ...

  5. Mac OS X 中安装JDK 7

    通过Mac系统的更新安装Java的版本均为JDK 6的版本,如果想要在Mac上安装JDK 7,就需要到Oracle的网站上去下载相应的安装包. 下面为详细教程: 最新版本为JDK8,目前需求JDK7够 ...

  6. CentOS_6.5安装Nginx+PHP+MySQL

    #!/bin/bash PATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin:~/bin export PATH # Ch ...

  7. arch框架人员、组织说明

    目前ERP辅助系统集成了三大模块功能,分别是财务辅助.物理辅助.报账平台. 财务辅助模块人员在ARCH_USER 表中进行管理,通过单独的[用户映射功能]将ARCH系统用户和ERP用户进行关联,关联信 ...

  8. UBUNTU 14.04 安装 OPENCV 2.4.9

    1.  从OpenCV.org 下载源代码 opencv-2.4.9.zip 2. 解压到准备好的目录 unzip opencv-2.4.9.zip 3. 进入源码目录,创建release目录 cd ...

  9. ADO.NET实体数据模型使用探索1

    今天研究了下ADO.NET实体数据模型,想写个关于两张有外键关系的增改删查,以此来稍增加点难度. 编程环境:vs2010+sql2005 1.在SQL2005下建立三张表:学生信息表Student(S ...

  10. 低功耗蓝牙4.0BLE编程-nrf51822开发(4)

    蓝牙是一种短距离的通讯方式,它设计的意图是取代电子便携设备之间的有线电缆连接.蓝牙的主要特性是健壮性.低功耗.成本低,它工作于免费的2.4无线传输频段. 蓝牙有两种技术系统:基本速率Basic Rat ...