Jquery 样式和颜色答案

【问题标题】：Jquery Styles and ColorsJquery 样式和颜色
【发布时间】：2020-05-04 22:06:25
【问题描述】：

如何使用 Jquery 为我的元素创建样式？我们必须制作一个表格并为单元格提供一定的背景颜色。我想知道我是否可以使用 addClass() 方法。我必须在不使用 css 的情况下给单元格样式。不能通过 CSS 来赋予表格样式的单元格。这将在 2 天内到期，因此我将尽快回复。

$(document).ready(function(){
  $("h1").mouseenter(function() {
$("#celery").addClass("apple ");   
 $("#beetroot").addClass("pear "); 
  });

$("th").mouseenter(function(){                                                  
    $("th").css({"background-color": "red", "font-size": "200%"});  
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
     * {font-family: "Comic Sans MS", sans-serif;}
            table, th, td {
                border: 3px solid blue;
                border-collapse: collapse;
            }
            table {
                margin:auto;
            }
            td {
                width: 5%;
                padding: 10px;
                font-size: 10pt;
                text-align: center;
            }
            h1 {text-align: center}
       
        .celery {
           background-color:red
            
        }
        
        </style>
        
        
        <body class="siblings">
<h1>Unit 4 Say 4 Andrew Hu</h1>
    <table>
   <tr id="celery">
    <th>Wisconsin</th> 
    <th>Kentucky</th>
    <th>Maryland</th>
    <th>Maine</th>
    <th>New York</th>
    <th>Texas</th>
    <th> Califronia</th>
    <th>Virginia</th>
    </tr> 

  <tr id="beetroot" >
    <td>Lorem ipsum dolor sit amet,</td> 
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    </tr>  
    <tr>
   <td id="celery" >Etiam scelerisque ex et dignissim semper.</td> 
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    </tr>  
    <tr id="beetroot" >
   <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td> 
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    </tr>  
    <tr id="celery">
   <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td> 
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px">></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    </tr>  
    <tr id="beetroot">
   <td>Praesent mi quam</td> 
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    </tr>  
    <tr id="celery">
   <td>gula tristique semper</td> 
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    </tr>  
    <tr id="beetroot">
    <td>South</td> 
    <td>Park</td>
    <td>is</td>
    <td>an</td>
    <td>amazing</td>
    <td>show</td>
    <td>unlike</td>
    <td>Family Guy</td>
    </tr>  
    </table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("h1").mouseenter(function() {
$("#celery").addClass("apple ");   
 $("#beetroot").addClass("pear "); 
  });

$("th").mouseenter(function(){                                                  
    $("th").css({"background-color": "red", "font-size": "200%"});  
  });



});

    </script>
</head>

<h1>Unit 4 Say 4 Andrew Hu</h1>
    <table>
   <tr id="celery">
    <th>Wisconsin</th> 
    <th>Kentucky</th>
    <th>Maryland</th>
    <th>Maine</th>
    <th>New York</th>
    <th>Texas</th>
    <th> Califronia</th>
    <th>Virginia</th>
    </tr> 

  <tr id="beetroot" >
    <td>Lorem ipsum dolor sit amet,</td> 
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    </tr>  
    <tr>
   <td id="celery" >Etiam scelerisque ex et dignissim semper.</td> 
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    </tr>  
    <tr id="beetroot" >
   <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td> 
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    </tr>  
    <tr id="celery">
   <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td> 
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px">></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    </tr>  
    <tr id="beetroot">
   <td>Praesent mi quam</td> 
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    </tr>  
    <tr id="celery">
   <td>gula tristique semper</td> 
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    </tr>  
    <tr id="beetroot">
    <td>South</td> 
    <td>Park</td>
    <td>is</td>
    <td>an</td>
    <td>amazing</td>
    <td>show</td>
    <td>unlike</td>
    <td>Family Guy</td>
    </tr>  
    </table>
</body>
</html>

【问题讨论】：

标签： jquery css styles

【解决方案1】：

你可以这样修复它

$("th").mouseenter(function(){  
    $(this).css({"background-color": "red", "font-size": "200%"});  
  });
});

查看下面的演示

$(document).ready(function(){
  $("h1").mouseenter(function() {
      $("#celery").addClass("apple ");   
      $("#beetroot").addClass("pear "); 
  });

$("th").mouseenter(function(){  
    $(this).css({"background-color": "red", "font-size": "200%"});  
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
     * {font-family: "Comic Sans MS", sans-serif;}
            table, th, td {
                border: 3px solid blue;
                border-collapse: collapse;
            }
            table {
                margin:auto;
            }
            td {
                width: 5%;
                padding: 10px;
                font-size: 10pt;
                text-align: center;
            }
            h1 {text-align: center}
       
        .celery {
           background-color:red
            
        }
        
        </style>
        
        
        <body class="siblings">
<h1>Unit 4 Say 4 Andrew Hu</h1>
    <table>
   <tr id="celery">
    <th>Wisconsin</th> 
    <th>Kentucky</th>
    <th>Maryland</th>
    <th>Maine</th>
    <th>New York</th>
    <th>Texas</th>
    <th> Califronia</th>
    <th>Virginia</th>
    </tr> 

  <tr id="beetroot" >
    <td>Lorem ipsum dolor sit amet,</td> 
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    <td>Lorem ipsum dolor sit amet,</td>
    </tr>  
    <tr>
   <td id="celery" >Etiam scelerisque ex et dignissim semper.</td> 
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    <td>Etiam scelerisque ex et dignissim semper.</td>
    </tr>  
    <tr id="beetroot" >
   <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td> 
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    <td><img src="https://media1.giphy.com/media/Rfe6JpT1ILQa9Z81ap/source.gif" width="100px"></td>
    </tr>  
    <tr id="celery">
   <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td> 
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px">></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    <td><img src="http://southparkstudios.mtvnimages.com/shared/characters/kids/kyle-broflovski.png" width ="100px"></td>
    </tr>  
    <tr id="beetroot">
   <td>Praesent mi quam</td> 
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    <td>Praesent mi quam</td>
    </tr>  
    <tr id="celery">
   <td>gula tristique semper</td> 
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    <td>gula tristique semper</td>
    </tr>  
    <tr id="beetroot">
    <td>South</td> 
    <td>Park</td>
    <td>is</td>
    <td>an</td>
    <td>amazing</td>
    <td>show</td>
    <td>unlike</td>
    <td>Family Guy</td>
    </tr>  
    </table>

【讨论】：