<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window.getComputedStyle</title>
<style>
div {
width: 300px;
height: 300px;
background-color: lightcoral;
border: solid 1px #999;
}
div[data-desc]::after {
content: attr(data-desc);
display: block;
width: 50px;
height: 50px;
background-color: blue;
margin: 50% auto;
}
</style>
</head>
<body>
<div data-desc="">
:after與::after基本上是一樣的,一個是CSS2的語法,一個是CSS3的語法
</div>
<script>
var divEle = document.getElementsByTagName("div")[0];
var divStyle = window.getComputedStyle(divEle, null);
divEle.setAttribute("data-desc", divStyle.width + ":" + divStyle.height);
console.log(divStyle.width);
var divAfterStyle = window.getComputedStyle(divEle, "after");
console.log(divAfterStyle.width);
addEvent(divEle, "mouseenter", function (e) {
var e = e || window.event;
e.target.setAttribute("data-desc", divAfterStyle.width + ":" + divAfterStyle.height);
});
addEvent(divEle, "mouseout", function (e) {
var e = e || window.event;
e.target.setAttribute("data-desc", divStyle.width + ":" + divStyle.height);
});
function addEvent(dom, type, fn, useCapture) {
if (document.addEventListener) {
dom.addEventListener(type, fn, useCapture);
} if (document.attachEvent) {
dom.attachEvent("on" + type, fn);
} else {
dom["on" + type] = fn;
}
}
function removeEvent(dom, type, fn, useCapture) {
if (document.removeEventListener) {
dom.removeEventListener(type, fn, useCapture);
} if (document.detachEvent) {
dom.detachEvent("on" + type, fn);
} else {
dom["on" + type] = null;
}
}
</script>
<p>這是上面代碼的實現<br />
我們有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些
<span data-descr="small popups which also hide again">提示</span>。<br />
把鼠標放上去<span data-descr="not to be taken literally">看看</span>.
</p>
</body>
<style>
span[data-descr] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: help;
}
span[data-descr]:hover::after {
content: attr(data-descr);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 12px;
color: #000000;
font-size: 14px;
z-index: 1;
}
</style>
</html>
![在這裏插入圖片描述]()
