美文网首页
jQuery css() 方法之返回 CSS 属性

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

作者: 黄怼怼 | 来源:发表于2017-09-05 14:52 被阅读0次

    返回 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)")

    相关文章

      网友评论

          本文标题:jQuery css() 方法之返回 CSS 属性

          本文链接:https://www.haomeiwen.com/subject/pciujxtx.html