Question

我有HTML代码（存在于同一DOM中），我想在其中应用逻辑，如果DOM上有特定的类可用，则样式不显示应该应用于同一DOM中存在的其他类。

HTML代码＃1

<div class="cpac-video__inner">
   <div class="vjs-playing vjs-has-started" >   // If vjs-playing vjs-has-started classes are present in a DOM 

   </div>  
</div>

HTML代码＃2

<span class="video-hl video-cat HW">   // then style display none should be applied to HW class
    <span class="cpac-icon cpac-icon-hl-link-flip tv-logo"></span>ABC  
</span>

这是我尝试过的方法，但是不起作用。

var elementExists = document.getElementsByClassName("vjs-playing vjs-has-started");

if(elementExists)
{
document.getElementsByClassName("HW").style.display = "none";
}

问题陈述：

我想知道我需要在上面的脚本中进行哪些更改，以便在DOM中可以使用特定类时样式显示不应将任何内容应用于同一DOM中的其他类。

Answer 1

看看以前有什么：

var elementExists = document.getElementsByClassName("vjs-playing vjs-has-started");

if(elementExists)
{
document.getElementsByClassName("HW").style.display = "none";
}

<div class="cpac-video__inner">
   <div class="vjs-playing vjs-has-started" >   // If vjs-playing vjs-has-started classes are present in a DOM 

   </div>  
</div>


<span class="video-hl video-cat HW">   // then style display none should be applied to HW class
    <span class="cpac-icon cpac-icon-hl-link-flip tv-logo"></span>ABC

它返回Uncaught TypeError: Cannot set property 'display' of undefined，这是由于getElementsByClassName返回的不是直接值，而是返回包含该名称的所有类的数组。

请参阅以下内容：

var elementExists = document.getElementsByClassName("vjs-playing vjs-has-started")[0];
console.log(document.getElementsByClassName("vjs-playing vjs-has-started"));

if(elementExists)
{
console.log(document.getElementsByClassName("HW"));
document.getElementsByClassName("HW")[0].style.display = "none";
}

<div class="cpac-video__inner">
   <div class="vjs-playing vjs-has-started" >   // If vjs-playing vjs-has-started classes are present in a DOM 

   </div>  
</div>


<span class="video-hl video-cat HW">   // then style display none should be applied to HW class
    <span class="cpac-icon cpac-icon-hl-link-flip tv-logo"></span>ABC

请注意，添加指向第一个索引的[0]与不添加索引之间的区别。这是因为getElementByClassName返回具有所有给定类名的所有子元素的类似数组的对象。

将显示不应用到在JS的同一DOM中可以使用另一个类的类

1 个答案: