时间戳

首页 > 解决方案 > 单击切换时更改徽标的 css 属性

javascript - 单击切换时更改徽标的 css 属性

问题描述

当我单击切换时，我想将 css 属性（z-index）更改为导航栏中的徽标。当该切换关闭时，我需要将该属性更改回来。这可能吗？

我的切换有一个类“ubermenu-responsive-toggle-main” 我的徽标有一个类“header-logo” 打开切换有一个类“ubermenu-responsive-toggle-open”

标签： javascriptcsstoggle

解决方案

<!DOCTYPE html>
<html>
 <body>

<div id="demo" customAttribute="value1">this text toogles</div> 
<button onclick="myFunction()">Click me</button>

<script>
function myFunction() {
   elm=document.getElementById("demo");
  elm.setAttribute("customAttribute",elm.getAttribute("customAttribute")=="value1"?"value2":"value1");
}
</script>

<style>
[customAttribute=value2]{
visibility: visible; 
}

[customAttribute=value1]{
visibility: hidden;
}
</style>

</body>
</html>

此代码是一个简单的切换，当您单击按钮时将隐藏然后显示文本。关键是 elm.setAttribute("customAttribute",elm.getAttribute("customAttribute")=="value1"?"value2":"value1");

推荐阅读