jQuery css() 方法之返回 CSS 属性

返回 CSS 属性
如需返回指定的 CSS 属性的值,请使用如下语法:
css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Background color = " + $("p:eq(2)").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 元素的背景色</button>
</body>
</html>

那么如何返回第二个匹配元素的 background-color 值呢??

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
    alert("背景颜色 = " + $("p:eq(1)").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>

增加知识点: jQuery :eq() 选择器

定义和用法

:eq() 选择器选取带有指定 index 值的元素。

index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1)。

经常与其他元素/选择器一起使用,来选择指定的组中特定序号的元素(如上面的例子)。

语法
$(":eq(index)")

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,863评论 1 92
  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 1,072评论 0 2
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,526评论 0 44
  • 今天,和老婆孩子一起参加了朋友的婚礼。新娘和图上右一都是我近20年的关系,老同学、老伙计、老朋友,将男女纯粹友谊发...
    長安诛客阅读 343评论 0 0
  • 梦见你的夜 总是长睡不愿醒
    805039ad229e阅读 78评论 0 0