求幫忙 Uncaught TypeError: Cannot set property 'onmouseenter' of null這個錯誤,不知道怎么改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tooltips</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-size: 14px;
background: url(bg.jpg);
line-height: 2;
}
#demo
{
width: 500px;
margin: 30px auto;
padding: 20px 30px;
position: relative;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
}
#demo h2
{
color: #03f;
}
#demo .tooltip
{
cursor: help;
color: #03f;
}
.tool-box
{
display: block;
background-color: #fff;
line-height: 3;
border: 1px solid #66ccFF;
color: #333;
padding: 20px;
font-size: 14px;
border-radius: 5px;
overflow: auto;
}
</style>
<script type="text/javascript">
var className = 'tool-box';
function showtooltip (obj,id,html,width,height) {
if (document.getElementById(id)==null) {
var toolbox;
toolbox=document.createElement('div');
toolbox.className=className;
toolbox.id=id;
toolbox.innerHTML=html;
obj.appendChild(toolbox);
obj.onmouseleave=function(){
document.getElementById(id).style.display="none";
}
}
else
{
document.getElementById(id).style.display="block";
}
}
var t1=document.getElementById('tooltip1');
t1.onmouseenter = function () {
? ? ? ? showtooltip(this, "t1", "中華人民共和國", 200);
? ? };
</script>
</head>
<body>
<div id="demo">
? ? <h2>原生JavaScript實現(xiàn)ToolTip效果</h2>
<!-- <div>aaaaa</div> -->
? ? <p>ToolTip效果是非常常見的網(wǎng)頁特效,它可以在用戶將指針放置在控件上時為用戶顯示提示信息。
? ? ? ? 比如簡稱文字顯示一行文字全稱,例:<a id="tooltip1">中國</a>, <a id="tooltip2">NBA</a>。
? ? ? ? 又比如顯示一段文字,例:唐詩三百首中的<a id="tooltip3">春曉</a>你會么?如果不看tooltip提示你背不出來的話,那么你
? ? ? ? 可要加油了。
? ? </p>
? ? <p>
? ? ? ? ToolTip效果還可以用來顯示圖片,例:<a id="tooltip4">西湖美景</a>。當然顯示一塊兒帶格式的內(nèi)容也不在話下,例:
? ? ? ? <a id="tooltip5">我的資料</a>。
? ? </p>
? ? <p>
? ? ? ? 甚至你可以顯示一整個網(wǎng)站:例:<a id="tooltip6">慕課網(wǎng)</a>。
? ? </p>
? ? <p>
? ? ? ? 注意好的ToolTip需要考慮樣式、效果、頁面的邊界等信息,希望你可以做出更漂亮的ToolTip效果。
? ? </p>
</div>
</body>
</html>
2016-01-09
哦,我不知道。所以就回答了。嘻嘻。
2016-01-01
將代碼用window.onload包圍起來,JS代碼放在上面訪問不到HTML元素。