jquery Multiple Methods of Setting css Style of Summary

  • 2021-07-22 08:44:37
  • OfStack

Summary of various methods of setting css style, jquery


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  </style>  
</head>
<body>
  <ul>
    <li> Multiple brothers 1</li>
    <li> Multiple brothers 2</li>
    <li> Multiple brothers 3</li>
    <li> Multiple brothers 4</li>
    <li> Multiple brothers 5</li>
    <li> Multiple brothers 6</li>
    <li> Multiple brothers 7</li>
    <li> Multiple brothers 8</li>
    <li> Multiple brothers 9</li>
  </ul>
  <ul id="ul">
    <li> Multiple brothers 1</li>
    <li> Multiple brothers 2</li>
    <li> Multiple brothers 3</li>
    <li> Multiple brothers 4</li>
    <li> Multiple brothers 5</li>
    <li> Multiple brothers 6</li>
    <li> Multiple brothers 7</li>
    <li> Multiple brothers 8</li>
    <li> Multiple brothers 9</li>
  </ul>

  <script type="text/javascript" src="jquery-1.11.1.js"></script>
  <script>
    // Settings css Attribute 
    $("ul").css("backgroundColor","red"); 

    // Set multiple values at the same time 
    $("ul").css({
      backgroundColor: "yellow",
      fontSize: "16px"

    });

    // Interval display does not 1 The colour of the sample 
    $("#ul li").css("color",function(index,value){
      console.log(index); // Sequence number of the current element 
      console.log(value); // The value of the style to be set for the current element 
      if(index%2==0){
        return "red";
      }else{
        return "blue";
      }
    });

  </script>
</body>
</html> 

Related articles: