Javascript功能無法訪問CSS樣式

Javascript功能無法訪問CSS樣式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>

來源

2012-10-26 John Citizen

你''標籤是缺失關閉''' –

所以你得到一個錯誤？ –

我沒有得到任何錯誤，但造型完全失蹤！ –

一個錯誤是你所有的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-26 14:09:46 aefxx

那麼如何將造型定位在正確的範圍內呢？ –

我剛剛測試過，如果我關閉身體標籤>它不起作用！ :) –

順便說一句，我也測試過，刪除;屬性沒有區別之後。 –

每個人都是關於你的語法和有關文件撰寫的錯誤是正確的。放棄document.write，你會好得多。

如果你只是試圖把該HTML頁面加載後身體標記，然後我會用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-26 14:45:26 Ryan

請注意，當某些按鈕被右鍵單擊時，小菜單將被調用。在屏幕上的其他地方瀏覽器的默認右鍵菜單功能是可以的。這就是爲什麼我不是一個事件處理等後 –

謝謝，但你的方法返回兩個錯誤： 1.未捕獲的SyntaxError：意外的標記非法突出行「body.innerHTML ......」和2。Uncaught ReferenceError：RunMiniMenu未定義突出顯示「

Javascript功能無法訪問CSS樣式

回答

相關問題