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. GC 基础

    = GC 基础 ===================== JAVA堆的描述如下: 内存由 Perm 和 Heap 组成. 其中 Heap = {Old + NEW = { Eden , from, ...

  2. Java递归搜索指定文件夹下的匹配文件

    import java.io.File; import java.util.ArrayList; import java.util.List; import java.util.Queue; /** ...

  3. “通过jumpserver远程登录linux服务器，rz上传文件速度过慢”问题的解决

    问题: windows通过jumpserver远程登录到linux服务器,使用rz上传jar包,速度太慢(10k以内). 解决方案: 思路:通过ssh直接登录远程服务器 1.secureCRT-> ...

  4. 《Java核心技术卷二》笔记（一）流与文件

    一.流的概念 在Java中,可以提供字节序列的对象,或者可以接收字节序列的对象,都可以抽象成流.系统中的文件,网络,内存这些设备都可以读入或者写入字节,自然也可以用流的方式来操作.能向程序中提供字节序 ...

  5. tunnel.p4

    Tunneling: VXLAN and NVGRE (including L2/L3 Gateway), Geneve, GRE and IPinIP /* Copyright 2013-prese ...

  6. eclipse 版本号

    Eclipse 3.1 版本代号 IO [木卫1,伊奥]  Eclipse 3.2 版本代号 Callisto [木卫四,卡里斯托 ]Eclipse 3.3 版本代号 Eruopa [木卫二,欧罗巴  ...

  7. 腾讯星座运势api

    请求地址: http://app.data.qq.com/?umod=astro&act=astro&jsonp=1&func=TodatTpl&t=4&a=t ...

  8. http UserAgent

    string uAgent = Request.ServerVariables["HTTP_USER_AGENT"].ToLower();  //获取客户端浏览器的请求 判断 是什 ...

  9. 线性表集合A=A B

    大话数据结构 void union(List *a, List Lb) { int La_len, Lb_len, i; ElemType e; La_len = ListLength(La); Lb ...

  10. 关于jQuery学习

    ≡[..]≡≡[..]≡ 所有的实例都位于document.ready里面--为了防止文档在未完全加载之前就运行函数导致操作失败. $(document).ready(function(){ --- ...