blob: 8a95e4f44f7ef38dc7c8b4fca24332cc5bbba094 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<style>
img { width: 30px; height: 30px; background-color: red; }
.cover { position: absolute; background-color: green; opacity: 0.7; }
</style>
<div style="width: 500px;
background-color: lightyellow;
writing-mode: vertical-rl;
font: 40px Ahem;
color: red;
-webkit-font-smoothing: none;
">
<br>
<br>
<img id="t-0">
<ruby id="t-1">1<span id="t-2">2</span><rt id="t-3">3</rt></ruby>
<span>
<div id="t-4" style="display: inline-block">4<div id="t-5">5</div></div>
</span>
<span id="t-5">
<img id="t-6">
</span>
<span id="t-7">
7 <span id="t-8">8</span>
</span>
</div>
<script>
for (var i = 0; i < 9; ++i) {
var element = document.getElementById("t-" + i);
var clientRect = element.getClientRects()[0];
var cover = document.createElement("div");
cover.className = "cover";
cover.style.width = clientRect.width + "px";
cover.style.height = clientRect.height + "px";
cover.style.top = clientRect.top + "px";
cover.style.left = clientRect.left + "px";
document.body.appendChild(cover);
}
</script>
|
