jQuery CSS 操作 - css() 方法-阿里云开发者社区

开发者社区> 桃子红了呐> 正文

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>





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

相关文章
阿里云服务器ecs实例选择(地域+CPU+操作系统+带宽)
应该如何选择阿里云服务器呢?购买什么配置的阿里云服务器是适合自己的呢?下面我们就来说说如何选择阿里云服务器配置。
114 0
jQuery操作select下拉框的text值和value值的方法
1、jquery获取当前选中select的text值 $("#select1").find("option:selected").text(); 2、jquery获取当前选中select的value值 $("#select1").
771 0
[新手指南参考]阿里云服务器ecs实例选择(地域+CPU+操作系统+带宽)
应该如何选择阿里云服务器呢?购买什么配置的阿里云服务器是适合自己的呢?下面我们就来说说如何选择阿里云服务器配置
140 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
3964 0
[新手指南参考]阿里云服务器ecs实例选择(地域+CPU+操作系统+带宽)
应该如何选择阿里云服务器呢?购买什么配置的阿里云服务器是适合自己的呢?下面我们就来说说如何选择阿里云服务器配置。
60 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5703 0
[新手指南参考]阿里云服务器ecs实例选择(地域+CPU+操作系统+带宽)
应该如何选择阿里云服务器呢?购买什么配置的阿里云服务器是适合自己的呢?下面我们就来说说如何选择阿里云服务器配置。
34 0
在ECS上使用Windows “跨区卷”、“条带卷”讨论以及扩容操作
针对Windows动态磁盘的特殊使用场景,进行了一些讨论和实践。 结论,不推荐使用非“简单卷”形式的动态磁盘
2631 0
3209
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载