关于js生成阴影文字在IE上的问题
1：单纯的css生成阴影文字
可以通过设置span的部分重叠简单实现，代码如下
1：通过js创建css生成阴影文字
1
<html>
2
3
<script type="text/javascript">
4
var Shadows = {};
5
6 // Add shadows to a single specified element
7 Shadows.Add = function(element, shadows){
8 if(typeof element == "string")
9 element = document.getElementById(element);
10
11 //Replace the whitespace in the head and end
12 shadows = shadows.replace(/^\s+/, "").replace(/\s+$/, "");
13
14 var arguments = shadows.split(/\s+/);
15
16 var textNode = element.firstChild;
17 element.style.position = "relative";
18
19 //Create the shadows
20 var shadowNums = arguments.length/3;
21 for(var i = 0; i < shadowNums; i++){
22 var shadowX = arguments[i * 3];
23 var shadowY = arguments[i * 3 + 1];
24 var shadowColor = arguments[i * 3 + 2];
25
26 //Create a new <span> to hold the shadow
27 var shadow = document.createElement("span");
28 shadow.setAttribute("style", "position:absolute; " +
29 "left:" + shadowX + "; " +
30 "top:" + shadowY + "; " +
31 "color:" + shadowColor + ";");
32 //Add a copy of the text node to this shadow span
33 shadow.appendChild(textNode.cloneNode(false));
34 //Add the span to the container
35 element.appendChild(shadow);
36
}
37
38 //Put the text on top of the shadow
39 var text = document.createElement("span");
40 text.setAttribute("style", "position: relative");
41 text.appendChild(textNode);
42 element.appendChild(text);
43 };
44
45 //Search all tags and add shadows
46 Shadows.AddAll = function(root, tagName){
47 if(!root) root = document;
48 if(!tagName) tagName = '*';
49
50 var elements = root.getElementsByTagName(tagName);
51 for(var i = 0; i < elements.length; i++){
52 var shadow = elements[i].getAttribute("shadow");
53 if(shadow) Shadows.Add(elements[i], shadow);
54 }
55 };
56
57</script>
58
59<head>
60 <title>Create shadow with JavaScript</title>
61</head>
62<body onload="Shadows.AddAll();">
63 <div style="font: bold 32pt sans-serif;">
64 <span shadow='5px 5px #ccc 3px 3px #888 1px 1px #444'>Shadow</span>
65 </div>
66</body>
67</html>
68
firefox下显示正确，但是IE下显示的却不正确，位置完全不正确。<html>2
3
<script type="text/javascript">
4
var Shadows = {};
5
6
// Add shadows to a single specified element7
Shadows.Add = function(element, shadows){8
if(typeof element == "string")9
element = document.getElementById(element);10
11
//Replace the whitespace in the head and end12
shadows = shadows.replace(/^\s+/, "").replace(/\s+$/, "");13
14
var arguments = shadows.split(/\s+/);15
16
var textNode = element.firstChild;17
element.style.position = "relative";18
19
//Create the shadows20
var shadowNums = arguments.length/3;21
for(var i = 0; i < shadowNums; i++){22
var shadowX = arguments[i * 3];23
var shadowY = arguments[i * 3 + 1];24
var shadowColor = arguments[i * 3 + 2];25
26
//Create a new <span> to hold the shadow27
var shadow = document.createElement("span");28
shadow.setAttribute("style", "position:absolute; " +29
"left:" + shadowX + "; " +30
"top:" + shadowY + "; " +31
"color:" + shadowColor + ";");32
//Add a copy of the text node to this shadow span33
shadow.appendChild(textNode.cloneNode(false));34
//Add the span to the container35
element.appendChild(shadow);36
}37
38
//Put the text on top of the shadow39
var text = document.createElement("span");40
text.setAttribute("style", "position: relative");41
text.appendChild(textNode);42
element.appendChild(text);43
};44
45
//Search all tags and add shadows46
Shadows.AddAll = function(root, tagName){47
if(!root) root = document;48
if(!tagName) tagName = '*';49
50
var elements = root.getElementsByTagName(tagName);51
for(var i = 0; i < elements.length; i++){52
var shadow = elements[i].getAttribute("shadow");53
if(shadow) Shadows.Add(elements[i], shadow);54
}55
};56
57
</script>58
59
<head>60
<title>Create shadow with JavaScript</title>61
</head>62
<body onload="Shadows.AddAll();">63
<div style="font: bold 32pt sans-serif;">64
<span shadow='5px 5px #ccc 3px 3px #888 1px 1px #444'>Shadow</span>65
</div>66
</body>67
</html>68
