zoukankan      html  css  js  c++  java
  • JQuery之CSS函数

    jQuery 拥有三种用于 CSS 操作的重要函数:

    •      $(selector).css(name,value)
    •      $(selector).css({properties})
    •      $(selector).css(name)

     $(selector).css(name,value)用法示例:为所有匹配元素的给定 CSS 属性设置值

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("p").css("background-color","red");
      });
    });
    </script>
    </head>

    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">Click me</button>
    </body>
    </html>  


    $(selector).css({properties}) 用法示例:同时为所有匹配元素的一系列 CSS 属性设置值

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("p").css({"background-color":"red","font-size":"200%"});
      });
    });
    </script>
    </head>

    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">Click me</button>
    </body>
    </html>

    $(selector).css(name) 用法示例:返回指定的 CSS 属性的值

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("div").click(function(){
      $("#result").html($(this).css("background-color"));
      });
    });
    </script>
    </head>

    <body>
    <div style="100px;height:100px;
    background:#ff0000"
    ></div>
    <id="result">Click in the box</p>
    </body>

    </html>   

  • 相关阅读:
    P4932 浏览器 题解
    P1627 [CQOI2009]中位数 题解
    P4626 一道水题 II 题解
    P1439 【模板】最长公共子序列 题解
    P2324 [SCOI2005]骑士精神 题解
    P1784 数独 题解
    浅谈 Dancing Links X 算法
    P5905 【模板】Johnson 全源最短路 题解
    线性预处理阶乘,逆元和组合数
    需要支持多种操作的线段树该如何确定运算顺序?
  • 原文地址:https://www.cnblogs.com/lee0oo0/p/2583712.html
Copyright © 2011-2022 走看看