开发者社区> 桃子红了呐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery CSS 操作 - css() 方法

简介:
+关注继续查看

实例

设置 <p> 元素的颜色:

$(".btn1").click(function(){
  $("p").css("color","red");
});

定义和用法

css() 方法返回或设置匹配的元素的一个或多个样式属性。

返回 CSS 属性值

返回第一个匹配元素的 CSS 属性值。

注释:当用于返回一个值时,不支持简写的 CSS 属性(比如 "background" 和 "border")。

$(selector).css(name)
复制代码
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert($("p").css("color"));
  });
});
</script>
</head>

<body>
<p style="color:red">This is a paragraph.</p>
<button type="button">返回段落的颜色</button>
</body>
</html>
复制代码

设置 CSS 属性

设置所有匹配元素的指定 CSS 属性。

$(selector).css(name,value)
复制代码
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("color","red");
  });
});
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">改变段落的颜色</button>
</body>
</html>
复制代码

使用函数来设置 CSS 属性

设置所有匹配的元素中样式属性的值。

此函数返回要设置的属性值。接受两个参数,index 为元素在对象集合中的索引位置,value 是原先的属性值。

$(selector).css(name,function(index,value))
复制代码
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("color",function(){
    return "red";
    });
  });
});
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>设置所有 p 元素的 color 属性</button>
</body>
</html>
复制代码
复制代码
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").click(function() {
    $(this).css(
      "width", function(index, value) {return parseFloat(value) * 1.2;}
    );
  });
});
</script>
<style>
div {width:100px; height:50px; background-color:red;}
</style>
</head>

<body>
<div>请点击这里</div>
</body>
</html>
复制代码

设置多个 CSS 属性/值对

$(selector).css({property:value, property:value, ...})

把“名/值对”对象设置为所有匹配元素的样式属性。

这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

复制代码
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({
      "color":"white",
      "background-color":"#98bf21",
      "font-family":"Arial",
      "font-size":"20px",
      "padding":"5px"
    });
  });
});
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">改变段落的样式</button>
</body>
</html>





版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
奇妙的滚动css+html
GetUserMedia实例 #test {height: 60px;width: 40px;margin: 0 0 0 150px;overflow: hidden;background-color: #32db64;position:...
731 0
只用html和css画出不等分圆盘,不用canvas
  .box{height: 200px;width: 200px;border-radius: 100%; overflow: hidden; margin: 200px; position: relative; } .
866 0
前端(第一节课 HTML、CSS 、JAVAscript的概念)
HTML、CSS 、JAVAscript的概念 1、HTML HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 2、CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
1362 0
HTML标签和CSS个人总结
一、HTML标签 HTML标签可以分为块标签,内联标签和内联块。 1、块标签block:div p h1-h6 ul li ol li dl dd dt 。 特点:a、支持任何的样式。
1462 0
HTML/CSS/JavaScript学习笔记【持续更新】
HTML 标签 定义和用法 规定文本的字体、字体尺寸、字体颜色。 实例 规定文本字体、大小和颜色: 1 This is some text! 2 This is some text! 3 This is some text! HTML 与 XHTML 之间的差异 在 HTML 4.01 中,font 元素不被赞成使用。
1352 0
《HTML 5与CSS 3权威指南(第3版·下册)》——第20章 使用选择器在页面中插入内容
本节书摘来自华章出版社HTML 5与CSS 3权威指南(第2版·下册)——第20章 ,第20.1节 ,作者: 陆凌牛著.更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1125 0
《HTML 5与CSS 3权威指南(第3版·下册)》——20.2 插入图像文件
本节书摘来自华章出版社HTML 5与CSS 3权威指南(第2版·下册)——第20章 ,第20.2节 ,作者: 陆凌牛著.更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1078 0
《HTML 5与CSS 3权威指南(第3版·下册)》——第20章 20.3 使用content属性来插入项目编号
本节书摘来自华章出版社HTML 5与CSS 3权威指南(第2版·下册)——第20章 ,第20.3节 ,作者: 陆凌牛著.更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1182 0
《HTML 5与CSS 3权威指南(第3版·下册)》——第20章 20.3.3 指定编号的样式
本节书摘来自华章出版社HTML 5与CSS 3权威指南(第2版·下册)——第20章 ,第20.3节 ,作者: 陆凌牛著.更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1075 0
4267
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载