个人中心
gpt4 book ai didi

Javascript 没有改变 CSS 变量

转载 作者：行者123 更新时间：2023-11-28 03:30:58 26 4
gpt4 key购买 nike

我正在尝试操纵 CSS 变量以从相对于屏幕大小的位置启动菜单，但它不会从样式部分开头初始化的值改变。

我的代码可以在 https://jsfiddle.net/70qpqg2f/ 找到

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="Width=device-Width, initial-scale=1">
  <link href="menu-vertical.css" rel="stylesheet" type="text/css" />
  <style>
     :root {
      --LeftSide: 50;
    }

    #menu-v li,
    #menu-v a {
      zoom: 1;
    }
    /* Hacks for IE6, IE7 */

    #menu-v {
      width: 180px;
      /* Main Menu Item widths */
      border: 1px solid #ccc;
      border-top: none;
      position: relative;
      font-size: 0;
      list-style: none;
      padding: 0;
      display: block;
      margin-left: calc(var(--LeftSide) * 1px);
      margin-top: 40px;
      z-index: 9;
    }

    #menu-v ul {
      width: 180px;
      /* Main Menu Item widths */
      border: 1px solid #ccc;
      border-top: none;
      position: relative;
      font-size: 0;
      list-style: none;
      padding: 0;
      display: block;
      margin: 0;
      z-index: 9;
    }
    /* Top level menu links style
    ---------------------------------------*/

    #menu-v li {
      background: #FFF url(bg.gif) repeat-x 0 2px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    #menu-v li a {
      font: normal 12px Arial;
      border-top: 1px solid #ccc;
      display: block;
      /*overflow: auto; force hasLayout in IE7 */
      color: black;
      text-decoration: none;
      line-height: 26px;
      padding-left: 26px;
    }

    #menu-v ul li a {
      line-height: 30px;
    }

    #menu-v li a.arrow:hover {
      background-image: url(arrowon.gif);
      background-repeat: no-repeat;
      background-position: 97% 50%;
    }
    /*Sub level menu items
    ---------------------------------------*/

    #menu-v li ul {
      position: absolute;
      width: 200px;
      /*Sub Menu Items width */
      visibility: hidden;
    }

    #menu-v a.arrow {
      background-image: url(arrow.gif);
      background-repeat: no-repeat;
      background-position: 97% 50%;
    }

    #menu-v li:hover,
    #menu-v li.onhover {
      background-position: 0 -62px;
    }

    #menu-v ul li {
      background: rgba(255, 255, 255, 0.86);
      background-image: none;
    }

    #menu-v ul li:hover,
    #menu-v ul li.onhover {
      background: #FFF;
      background-image: none;
    }
  </style>
  <SCRIPT TYPE="text/javascript">
    var alignWithMainMenu = false;

    /* Vertical Menu - Developed by http://www.MenuCool.com/vertical/vertical-menu. Retaining this comment is required.*/
    function initmenu() {
      menu - v.style.setProperty('--LeftSide', ((document.documentElement.clientWidth / 2) - 470));
      var e = document.getElementById("menuV2");
      var i = e.offsetHeight;
      var b = e.getElementsByTagName("ul");
      var g = /msie|MSIE 6/.test(navigator.userAgent);
      if (g) {
        for (var h = e.getElementsByTagName("li"), a = 0, j = h.length; a < j; a++) {
          h[a].onmouseover = function () {
            this.className = "onhover";
          };
          h[a].onmouseout = function () {
            this.className = "";
          };
        }
      }


      for (var a = 0; a < b.length; a++) {
        var c = b[a].parentNode;
        c.getElementsByTagName("a")[0].className += " arrow";
        b[a].style.left = c.offsetWidth + "px";
        b[a].style.top = c.offsetTop + "px";

        if (alignWithMainMenu) {
          var d = getParentOffsetRoot(c.parentNode, 0);
          if (b[a].offsetTop + b[a].offsetHeight + d > i) {
            var f;
            if (b[a].offsetHeight > i) {
              f = -d;
            } else {
              f = i - b[a].offsetHeight - d;
              b[a].style.top = f + "px";
            }
          }
        }

        c.onmouseover = function () {
          if (g) {
            this.className = "onhover";
          }
          var a = this.getElementsByTagName("ul")[0];
          if (a) {
            a.style.visibility = "visible";
            a.style.display = "block";
          }

        };

        c.onmouseout = function () {
          if (g) {
            this.className = "";
          }
          this.getElementsByTagName("ul")[0].style.visibility = "hidden";
          this.getElementsByTagName("ul")[0].style.display = "none";
        };

      }

      for (var a = b.length - 1; a > -1; a--) {
        b[a].style.display = "none";
      }
    }

    function getParentOffsetRoot(a, b) {
      if (a.id == "menuV2") {
        return b;
      } else {
        b += a.offsetTop;
        return getParentOffsetRoot(a.parentNode.parentNode, b);
      }
    }

    if (window.addEventListener) {
      window.addEventListener("load", initmenu, false);
    } else {
      window.attachEvent && window.attachEvent("onload", initmenu);
    }

    //          function myfunction() {
    //              document.menu-v.style.setProperty('--LeftSide', ((document.documentElement.clientWidth / 2) - 470));
    //          }

    //          window.onload = myfunction;
  </SCRIPT>
</head>

<body bgcolor="#bfb9b5">
  <ul id="menu-v">
    <li><a href="#">Item 1</a></li>
    <li>
      <a href="#">Item 2</a>
      <ul class="sub">
        <li><a href="vertical-menu#1">Vertical Menu</a></li>
        <li><a href="vertical-menu#2">Vertical Menus</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item 3</a>
      <ul class="sub">
        <li><a href="#">Sub Item 3.1</a></li>
        <li><a href="#">Sub Item 3.2</a></li>
        <li><a href="#">Sub Item 3.3</a></li>
        <li><a href="#">Sub Item 3.4</a></li>
        <li><a href="#">Sub Item 3.5</a></li>
      </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    <li>
      <a href="#">Item 5</a>
      <ul class="sub">
        <li><a href="#">Sub Item 5.1</a></li>
        <li>
          <a href="#">Sub Item 5.2</a>
          <ul class="sub">
            <li><a href="#521">Vertical Menu 5.2.1</a></li>
            <li><a href="#522">Vertical Menu 5.2.2</a></li>
            <li><a href="#523">Vertical Menu 5.2.3</a></li>
            <li><a href="#524">Vertical Menu 5.2.4</a></li>
            <li><a href="#525">Vertical Menu 5.2.5</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Sub Item 5.3</a>
          <ul class="sub">
            <li><a href="#">Sub Item 5.3.1</a></li>
            <li><a href="#">Sub Item 5.3.2</a></li>
            <li><a href="#">Sub Item 5.3.3</a></li>
            <li><a href="#">Sub Item 5.3.4</a></li>
            <li><a href="#">Sub Item 5.3.5</a></li>
            <li><a href="#">Sub Item 5.3.6</a></li>
            <li><a href="#537">Vertical Menus 5.3.7</a></li>
            <li><a href="#538">Vertical Menus 5.3.8</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Item 6</a></li>
  </ul>
</body>

</html>

我试图将所有 HTML、CSS 和 Javascript 放在一个文件中，以便于操作。如果我将每段代码分离到单独的文件中，那没有任何区别。

最佳答案

首先，您应该将 HTML、CSS 和 Javascript 分开，至少在 fiddle 中。

其次，fiddles 不应该有 HTML、META 和 HEAD 标签，这会引发警告。

第三，当你的 fiddle 运行时，它会抛出这个错误:

Uncaught ReferenceError: v is not defined

当您在 myfunction 中引用它时，变量 v 不存在(如 v.style):

        function myfunction() {
            document.menu-v.style.setProperty('--LeftSide', ((document.documentElement.clientWidth / 2) - 470));
        }

元素名称 (menu-v) 中的破折号 (-) 会导致问题。

当然，即使您重命名了它，您也无法使用 document.cssclassname 访问和修改 CSS 类。 See this SO post和 this one

只需使用 div 的 id 使用 javascript 方法访问它:getElementById() 如您的 fiddle 的更新所示.注意:您的 javascript 中还有其他几个无效访问。只需查看 Web 控制台中的错误即可调试它们。

关于Javascript 没有改变 CSS 变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44738901/

26 4 0
文章推荐： css - 网站部分加载背景图片(Bootstrap)
文章推荐： css - bootstrap 相册中的最后一张图像越界
文章推荐： javascript - 使用 bootstrap-vue 运行 jest 时出现问题
文章推荐： css - bootswatch/bootstrap 导航栏 css 未按预期显示
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com