当 div 样式显示为 none 时删除 text-decoration 直到事件被触发？答案

【问题标题】：Remove text-decoration when the div style is displayed none until the event is triggered?当 div 样式显示为 none 时删除 text-decoration 直到事件被触发？
【发布时间】：2019-12-07 20:51:23
【问题描述】：

我正在为我的网站进行移动优化，但无法让菜单按我想要的方式显示...我无法从链接中删除下划线。

页面加载时，标题会显示企业徽标、菜单按钮和电话号码。当用户单击菜单按钮时，我希望电话屏幕显示按钮以将它们链接到其他页面。这是有效的，但我无法摆脱链接上的下划线。

function dispmenu(){
    document.getElementById('toolbar').style.display='block';
    document.getElementById('menubutton').style.display='none';
    document.getElementById('contact_bar_phone').style.display='none';
    document.getElementById('logo').style.display='none';
}

var buttonsmob = `
    <span id='toolbar' style='display:none;'>
    <a href='https://www.home.com'><div class='toolbarbutton'>Home</div></a>
    <a href='Locations.php'><div class='toolbarbutton'>Locations</div>
    <a href='ContactUs.php'><div class='toolbarbutton'>Contact Us</div></a>
    <div onclick='closemenu()' class='toolbarbutton'>Close Menu</div>
    </span>`;

我尝试将text-decoration: none; 添加到.toolbarbutton a{ .toolbarbutton{ 的css 和

function dispmenu()
{
    document.getElementById('toolbar').style.display='block';
    document.getElementById('toolbar').style.text-decoration='none';
}

但这些都不起作用。我觉得这是因为该项目设置为 display: none on page load，但不知道如何解决？

【问题讨论】：

标签： javascript html css mobile responsive-design

【解决方案1】：

使用此代码：

function dispmenu()
{
    document.getElementById('toolbar').style.display='block';
    document.querySelectorAll('#toolbar a').forEach(link =>{
      link.style.textDecoration = 'none';
    })
}

【讨论】：

谢谢！这就是我需要的！

【解决方案2】：

js中的css属性有不同的名字（见camelCase textDecoration）

function dispmenu()
{
    document.getElementById('toolbar').style.display='block';
    document.getElementById('toolbar').style.textDecoration='none';
}

【讨论】：

【解决方案3】：

你应该使用：

a {
    text-decoration: none;
}

【讨论】：

你应该多解释一下你的答案。大多数人都知道那是 css，但新开发人员不会知道您要推荐什么。
谢谢，这将解决这个问题，但会导致网站上的其他链接出现问题。

【解决方案4】：

如果菜单仅适用于移动设备，我建议您使用媒体查询进行此更改

媒体查询是一个命令，您可以限制屏幕大小并应用于 css 属性，而无需使用 java 脚本

@media (max-width: 600px) {
   .toolbarbutton a {
       text-decoration: none;
   }
}

这里有一个tutorial 可以帮助你。

【讨论】：