2

Javascript 函数无法访问 CSS 样式

我不明白为什么下面的 Javascript 函数无法访问任何 CSS 样式！演示脚本的想法是在您右键单击时在鼠标坐标处显示一个小的选项菜单。代码如下...

      <style type="text/css">

      .MiniMenuText {
      Font-family: "Comic Sans MS";
      Font-size: 11px;
      Font-weight: Normal;
      Font-style: Normal;
      Text-decoration: None;
      Text-align: Left;
      Color: #FFFFFF;
      Height:0;}

      .MiniMenuBox {
      -moz-box-shadow: 3px 3px 4px #000;
      -webkit-box-shadow: 3px 3px 4px #000;
      box-shadow: 3px 3px 4px #000;
      Padding: 1px;
      Width: 175px;
      Height: 80px;
      Background-color: #686868;
      Border-style: Solid;
      Border-color: #A0AAA0;
      Border-width: 1px;
      Text-align: Center;}

      <!--
      A:hover {Color:Black; Background-color:#FFFFFF;}
      -->

      </style>  

<script type="text/javascript">

      function RunMiniMenu() {

      var X=window.event.clientX;
      var Y=window.event.clientY;

      document.write('<div Class="MiniMenuBox"; Style="Position:Absolute; Left:'+X+'px;              Top:'+Y+'px;";>');
      document.write('<a Href=""; Target="_blank"; Class="MiniMenuText";>Option 1</a><br>');
      document.write('<a Href=""; Target="_blank"; Class="MiniMenuText";>Option 2</a><br>');
      document.write('<a Href=""; Target="_blank"; Class="MiniMenuText";>Option 3</a><br>');
      document.write('<a Href=""; Target="_blank"; Class="MiniMenuText";>Option 4</a><br>');
      document.write('<a Href=""; Target="_blank"; Class="MiniMenuText";>Option 5</a></div>');
      }

      </script>

      <body oncontextmenu="RunMiniMenu(); return false;"; </body>
4

2 回答 2

2

一个错误是;您在每个 HTML 属性之后放置。Michael Berkowski 提到了另一个（标签中的缺失）>。body

还有一件事要记住：当您document在页面完全加载后（即文档关闭后）写入时，写入它会产生一个缺少样式的新文档。

编辑

<style>
    /* Your styles here */
</style>

...
<body oncontextmenu="runMiniMenu();">
    <!-- Whatever markup you need comes here! -->

    <script type="text/javascript">
        function runMiniMenu(e) {
            var X = e.clientX,
                Y = e.clientY;

            var div = document.createElement('div');

            div.createAttribute('class', 'MiniMenuBox');
            div.createAttribute('style', 'position: absolute; left:'+X+'px ...

            for ( var i=1; i < 6; i++ ) {
                var a = document.createElement('a');
                a.createAttribute('target', '_blank');

                // You get the point!
                ...

                div.appendChild(a);
            }

            document.getElementsByTagName("body")[0].appendChild(div);

            return false;
        }
    </script>
</body>
于 2012-10-26T14:09:46.613 回答
0

对于您的语法和 document.write 中的错误，每个人都是正确的。放弃 document.write，你会好很多。

如果您只是想在页面加载后将该 html 放在 body 标记中，那么我会使用innerHTML

所以它看起来像这样：

<script type="text/javascript">

  function RunMiniMenu() {

  var X=window.event.clientX;
  var Y=window.event.clientY;
  var body = document.getElementsByTagName("body");

  body.innerHTML = "<div class='MiniMenuBox' style='position:absolute; left:"+X+"px;
          top:"+Y+"px;'><a href=''; target='_blank'; class='MiniMenuText'>Option 1</a><br/></div>";
  }

  </script>

  <body onload="RunMiniMenu(); return false;"> </body>
于 2012-10-26T14:45:26.993 回答