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. iis浏览网页时提示无法显示 XML 页

    无法显示 XML 页.         使用 样式表无法查看 XML 输入.请更正错误然后单击 刷新按钮,或以后重试.          处理资源 'http://localhost/ 时出错.第 1 ...

  2. OpenCV 2.4.11 VS2010 Configuration

    Add in the system Path: C:\opencv\build\x86\vc10\bin; Project->Project Property->Configuration ...

  3. android之消息机制（一）

    消息操作类Handler 首先编写main.xml文件代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk ...

  4. Redis Sentinel哨兵集群

    Redis Sentinel(哨兵集群)是一种高可用的redis部署方案.在集群中的redis-master服务挂掉时,无需人为干预,即可通过哨兵集群的自我调整,实现redis服务的持续可用. 哨兵集 ...

  5. js获取时间(本周、本季度、本月..)

    /** * 获取本周.本季度.本月.上月的开端日期.停止日期 */ var now = new Date(); //当前日期 var nowDayOfWeek = now.getDay(); //今天 ...

  6. PHP 设计模式 笔记与总结（7）适配器模式

    ① 适配器模式可以将截然不同的函数接口封装成统一的 API ② 实际应用举例:PHP 的数据库操作有 mysql,mysqli,pdo 三种,可以用适配器模式统一成一致.类似的场景还有 cache 适 ...

  7. coreDate 简化版

    建表: 自动生成: 代码: // // RootViewController.m // coreDate 简化版 #import "RootViewController.h" #i ...

  8. mobile cpu上禁用alpha test的相关总结

       因为,每家芯片的特性不同,根据向framebuffer写法的不同,分为tile-based的mobile cpu,如ImgTec PowerVR,ARM Mali,一部分老版本Qualcomm  ...

  9. mysql 锁

    Lock table有两种模式 lock tables table_name  read  [or write]; test1: session 1: lock tables tmp_xf_lock; ...

  10. Alternative Representations for 4-Bit Integers

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION