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>
答案 0 :(得分：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>
答案 1 :(得分：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>