title = this.innerHTML; 這句代碼什么意思????? 為什么刪掉之后整個頁面都沒了呢?? 求指教
<!DOCTYPE HTML>
<html>
<head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
? ? <title>ToolTip效果</title>
? ? <style>
? ? ? ? body {
? ? ? ? ? ? font-size: 18px;
? ? ? ? ? ? line-height: 1.8;
? ? ? ? ? ? font-family: "Microsoft YaHei", "微軟雅黑";
? ? ? ? }
? ? ? ? #demo {
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? margin: 30px auto;
? ? ? ? ? ? padding: 20px 30px;
? ? ? ? ? ? position: relative;
? ? ? ? ? ? background-color: #fff;
? ? ? ? }
? ? ? ? #demo h2 {
? ? ? ? ? ? color: #03F;
? ? ? ? }
? ? ? ? #demo .tooltip {
? ? ? ? ? ? color: #03F;
? ? ? ? ? ? cursor: help;
? ? ? ? }
? ? ? ? /*add box style */
? ? ? ? .box{
? ? ? ? ? ? position:absolute;
? ? ? ? ? ? background-color:#eee;
? ? ? ? ? ? color:#fff;
? ? ? ? ? ? padding:10px;
? ? ? ? ? ? border:#999 solid 1px;
? ? ? ? ? ? border-radius: 5px;
? ? ? ? ? ? box-shadow:2px 2px 4px #ccc;
? ? ? ? ? ? width:300px;
? ? ? ? ? ? height: 200px;
? ? ? ? }
? ? ? ? .box iframe{
? ? ? ? ? ? margin:0px;
? ? ? ? ? ? padding:0px;
? ? ? ? ? ? border:none;
? ? ? ? ? ? background-color: #FFF;
? ? ? ? ? ? width:inherit;
? ? ? ? ? ? height:inherit;
? ? ? ? }
? ? ??
? ? </style>
</head>
<body>
<div id="demo">
? ? <p><a class="tooltip" id="tooltip1">慕課網(wǎng)</a>的使命是傳播互聯(lián)網(wǎng)最前沿技術(shù),幫助更多的人實現(xiàn)夢想!在慕課網(wǎng)前端開發(fā)、
? ? ? ? <a class="tooltip" id="tooltip2">Android</a>開發(fā)、<a class="tooltip" id="tooltip3">iOS</a>開發(fā)等課程統(tǒng)統(tǒng)有,你還在等什么,趕緊來學習吧。
? ? </p>
</div>
<script type="text/javascript">
? ? window.onload=function(){
? ? ? ? //在demo中添加tipbox
? ? ? ? //給tipbox添加over leave event
? ? ? ? var demo = document.getElementById("demo"),
? ? ? ? ? ? tips = demo.getElementsByTagName("a");
? ? ? ? ? ??
? ? ? ? for(var i=0; i<tips.length; i++){
? ? ? ? ? ? tips[i].onmouseenter=function(){
? ? ? ? ? ? ? ? var top = this.offsetTop,
? ? ? ? ? ? ? ? ? ? left = this.offsetLeft,
? ? ? ? ? ? ? ? ? ? title = this.innerHTML;
? ? ? ? ? ? ? ? ? ? box = document.createElement("div");
? ? ? ? ? ? ? ? ? ? box.className = "box";
? ? ? ? ? ? ? ? ? ? box.id = "box";
? ? ? ? ? ? ? ? ? ? box.style.left = left+"px";
? ? ? ? ? ? ? ? ? ? box.style.top = top+20+"px";
? ? ? ? ? ? ? ? ? ? box.innerHTML = "<iframe src='http://baike.baidu.com/search?word="+title+"&enc=utf8'></iframe>";
? ? ? ? ? ? ? ? demo.appendChild(box);
? ? ? ? ? ? ? ? //console.log(top+':'+left);
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? tips[i].onmouseleave=function(){
? ? ? ? ? ? ? ? demo.removeChild(demo.lastChild);
? ? ? ? ? ? }
? ? ? ? } ? ?
? ? }
</script>
</body>
</html>
2016-10-23
<iframe src='?這里引用title了啊 ,刪了之后直接報錯了,所以頁面也不顯示了啊
2016-09-24
你這里的this是對象本身,也就是mouseenter時的那個a,this.innerHTML 是獲取當前對象的內(nèi)容,如果當前對象內(nèi)部只有文本 ? 那么this.innerHTML 就是文本,如果是標簽組成的內(nèi)容,?那么this.innerHTML 就是標簽組成的內(nèi)容