JQuery：JQuery 中的CSS()方法

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>

程序猿神奇的手，每时每刻，这双手都在改变着世界的交互方式！

本文转自当天真遇到现实博客园博客，原文链接：http://www.cnblogs.com/XYQ-208910/p/5891195.html，如需转载请自行联系原作者

JQuery：JQuery 中的CSS()方法相关推荐

jQuery 样式操作||操作 css 方法/设置类样式方法
操作 css 方法 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
HTML中引入CSS方法
一.行间样式 <div style="width: 100px;height: 100px;background-color: red;"> </div> ...
jQuery的HTML与CSS方法
addClass() 向被选元素添加一个或多个类名 after() 在被选元素后插入内容 append() 在被选元素的结尾插入内容 appendTo() 在被选元素的结尾插入HTML元素 attr( ...
jquery修改样式通过css方法
$(this).css("color","red"); 是给元素对象添加一组样式也可以通过以下方式来给元素对象一次性添加多组样式, 但要遵从一个规则:如果是复 ...
Jquery手册中常用的方法
1. $.extend([d],tgt,obj1,[objN]) 继承. 2. 3. 4.
简述在html中加入css方法,CSS引入方式 - CSS | 绿叶学习网
想要在一个页面引入CSS,共有以下3种方式. (1)外部样式表 (2)内部样式表 (3)行内样式表一.外部样式表外部样式表是最理想的CSS引入方式.在实际开发中,为了提升网站的性能速度和可维护性, ...
Jquery中css()方法获取边框长度
1. JQuery中可以使用css()方法获取块元素的边框宽度,如下: $("divMode").css("border-left-width");//左边框长 ...
JQuery中的CSS属性及操作
目录 1.JQuery中的css()方法 1) 返回 CSS 属性 2) 设置 CSS 属性 3) 设置多个 CSS 属性 2.JQuery的CSS操作 3.JQuery的class操作 1.JQue ...
web上渐进使用jQuery Mobile中animate相关CSS
一.关于animate.css 在介绍主人公之前,先说说他的亲戚. 有个叫"蛋一灯(Dan Eden)"的人弄了个名叫animate.css的开源项目,实际上就是使用CSS3 an ...

JQuery：JQuery 中的CSS()方法

JQuery：JQuery 中的CSS()方法相关推荐

最新文章

热门文章