时间戳

首页 > 解决方案 > 如何使用 javascript 更改 CSS style.display

javascript - 如何使用 javascript 更改 CSS style.display

问题描述

在我的网页中，菜单的结构如下：

<nav id="menu">
      <label for="tm" id="toggle-menu">Menù <span class="drop-icon">▾&lt;/span></label>
      <input type="checkbox" id="tm">
      <ul class="main-menu clearfix">
        <li><a href="http://www.internalsite.lab/">Home</a></li>
        <li><a href="#">Transfer 
            <span class="drop-icon">▾&lt;/span>
            <label title="Toggle Drop-down" class="drop-icon" for="sm1">▾&lt;/label>
            </a>
            <input type="checkbox" id="sm1">
              <ul class="sub-menu">
                <li><a href="data.html">internal data</a></li>
                <li><a href="data_ext.html">external data</a></li>
              </ul>
        </li>
        <li class="imp"><a href="necessary.html">Necessary Data</a></li>
      </ul>
    </nav>

和这样的CSS：

    #menu .main-menu {
      display: block;
    }

    #menu li, 
    #toggle-menu,
    #menu a {
      position: relative;
      display: block;
      color: white;
      text-transform: capitalize;
      text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
    }  

    #menu .main-menu li.imp{
      display: none;
    }

    #menu .main-menu li{
        background-color: #197dd1;
        font-weight: bold;
      }

如果发生某种情况，我想将 #menu .main-menu li.imp 的显示更改为块，因此我有一个这样的 js 代码

<script "application/javascript">
var javaScriptVar = "<?php echo $value; ?>";
if( value== "true") { document.getElementsByClassName('imp').style.display = 'block';}
</script>

我确信该值等于 true，但它不起作用。

任何想法？非常感谢

标签： javascriptphphtmlcss

解决方案

问题是函数getElements ByClassName，它返回一个节点列表/ HtmlCollections，你必须迭代节点。强文本

例如，元素的 id 是唯一的，并且您使用getElement Byid 这将返回一个公正的节点。

你可以尝试：

document.querySelectorAll('.imp').forEach(function(e) {
    e.style.display = 'none'
})

推荐阅读