如何選擇具有特定HTML內容符合值的Divs？-html教學-PHP中文網

如何選擇具有特定HTML內容符合值的Divs？

WBOY

發布： 2023-08-23 15:53:17

轉載

1215 人瀏覽過

如何選擇具有特定HTML內容符合值的Divs？

The division tag is also known as the div tag. HTML uses the div tag to create content divisions in web pages such (text, images, header, footer, navigation bar, etc. ). It is required to close the div tag, which has an opening (

) and closing (

) tag.

Div元素在網頁開發中是最有用的，因為它允許我們將網頁上的資料分割出來，並為不同類型的信息或功能創建特定的部分。

讓我們看一下以下範例，以更好地理解如何選擇具有與值相符的特定HTML內容的div。

Example

的中文翻譯為：

範例

In the following example we are running the script to select divs that has specific HTML content.

<!DOCTYPE html>
<html>
   <body>
      <style>
         .cricketers {
            width: 100px;
         }
         .marked {
            background-color: #27AE60 ;
         }
      </style>
      <div class="cricketers">
         <div>MSD</div>
         <div> KOHLI </div>
         <div> YUVI </div>
         <div> SEHWAG </div>
         <div> SACHIN </div>
      </div>
      <script>
         const visited = ["MSD"]
         const monElement = document.querySelector('.cricketers')
         for (let i = 0; i < monElement.children.length; i++) {
            let cricketers = monElement.children[i].textContent; 4. How To Select Divs That Has A Specific HTML Content That Matches Values
            for (let v of visited) {
               if (v == cricketers) {
                  monElement.children[i].innerHTML += ' - selected';
                  monElement.children[i].classList.add("marked");
               }
            }
         }
      </script>
   </body>
</html>

登入後複製

當腳本被執行時，它會產生一個由與div一起使用的名稱組成的輸出。其中一個文字會被綠色突出顯示，表示被選取的div。

Example

的中文翻譯為：

範例

執行下面的程式碼並觀察不同部分以不同的顏色被選擇。

<!DOCTYPE html>
<html>
   <body>
      <style>
         td[data-content="female"] {
            color: #7D3C98;
         }
         td[data-content^="p" i] {
            color: #239B56 ;
         }
         td[data-content*="8"] {
            color: #DE3163;
         }
      </style>
      <div>
         <table>
            <tr>
               <td data-content="Jhon">Jhon</td>
               <td data-content="male">male</td>
               <td data-content="28">28</td>
            </tr>
            <tr>
               <td data-content="Sindhu">Sindhu</td>
               <td data-content="female">female</td>
               <td data-content="18">18</td>
            </tr>
         </table>
      </div>
   </body>
</html>

登入後複製

執行上述腳本後，輸出視窗將彈出，根據網頁程式碼中提供的條件，以不同的顏色顯示所選的文字。

以上是如何選擇具有特定HTML內容符合值的Divs？的詳細內容。更多資訊請關注PHP中文網其他相關文章！