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. 转 c# 日期函数[string.Format----GetDateTimeFormats]格式 .

    DateTime dt = DateTime.Now;Label1.Text = dt.ToString();//2005-11-5 13:21:25Label2.Text = dt.ToFileTi ...

  2. 命令行编译运行Java

    首先要安装JDK,然后设置环境变量Path,添加C:\Program Files (x86)\Java\jdk1.8.0_66\bin 然后建立一个名为j.java的文件,里面加入如下代码: publ ...

  3. php页面之间传值

    echo("<script>window.open('2.php?head=".$head."');<script>");

  4. mysql中的comment用法

    转自:http://wenku.baidu.com/view/2a54e7892cc58bd63186bd8f.html 在MySQL数据库中,字段或列的注释是用属性comment来添加. 创建新表的 ...

  5. LINUX 2.6.18-238 local root exp

    /* * * * 1-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=0 * 0 _ __ __ __ 1 * ...

  6. 清除行内元素之间HTML空白的几种解决方案

    行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空白有时候显示 ...

  7. UVA 796 Critical Links（Tarjan求桥）

    题目是PDF就没截图了 这题似乎没有重边,若有重边的话这两点任意一条边都不是桥,跟求割点类似的原理 代码: #include <stdio.h> #include <bits/std ...

  8. apple-touch-icon,shortcut icon和icon的区别(手机站发送到手机桌面图标自定义)

    apple-touch-icon 可以了解到这是一个类似网站favicon的图标文件,用来在iphone和ipod上创建快捷键时使用. 这个文件应当是png格式,57x57像素大小,放在网站根目录之下 ...

  9. java 重写 重载

    首先我们来讲讲:重载(Overloading) (1) 方法重载是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型. 重载Overloading是一个类中多态 ...

  10. 获取真实ip的报告

    今天登录九秒社团 http://www.9miao.com/的时候忘记了用户名和密码,尝试了5次都没登录成功,网站弹出提示15分钟后才能再次登录.我纳闷它是怎么判断用户的登录次数,这时候用户还没有登录 ...