首页 > web前端 > html教程 > 如何选择具有特定HTML内容匹配值的Divs?

如何选择具有特定HTML内容匹配值的Divs?

WBOY
发布: 2023-08-23 15:53:17
转载
1448 人浏览过

如何选择具有特定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中文网其他相关文章!

相关标签:
来源:tutorialspoint.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板