1 |
<component lightWeight="true"> |
2 |
<attach event="onpropertychange" onevent="checkPropertyChange()" /> |
3 |
<attach event="ondetach" onevent="restore()" /> |
4 |
<script> |
5 |
//<![CDATA[ |
6 |
|
7 |
var doc = element.document; |
8 |
|
9 |
function init() { |
10 |
updateBorderBoxWidth(); |
11 |
updateBorderBoxHeight(); |
12 |
} |
13 |
|
14 |
function restore() { |
15 |
element.runtimeStyle.width = ""; |
16 |
element.runtimeStyle.height = ""; |
17 |
} |
18 |
|
19 |
/* border width getters */ |
20 |
function getBorderWidth(sSide) { |
21 |
if (element.currentStyle["border" + sSide + "Style"] == "none") |
22 |
return 0; |
23 |
var n = parseInt(element.currentStyle["border" + sSide + "Width"]); |
24 |
return n || 0; |
25 |
} |
26 |
|
27 |
function getBorderLeftWidth() { return getBorderWidth("Left"); } |
28 |
function getBorderRightWidth() { return getBorderWidth("Right"); } |
29 |
function getBorderTopWidth() { return getBorderWidth("Top"); } |
30 |
function getBorderBottomWidth() { return getBorderWidth("Bottom"); } |
31 |
/* end border width getters */ |
32 |
|
33 |
/* padding getters */ |
34 |
function getPadding(sSide) { |
35 |
var n = parseInt(element.currentStyle["padding" + sSide]); |
36 |
return n || 0; |
37 |
} |
38 |
|
39 |
function getPaddingLeft() { return getPadding("Left"); } |
40 |
function getPaddingRight() { return getPadding("Right"); } |
41 |
function getPaddingTop() { return getPadding("Top"); } |
42 |
function getPaddingBottom() { return getPadding("Bottom"); } |
43 |
/* end padding getters */ |
44 |
|
45 |
function getBoxSizing() { |
46 |
var s = element.style; |
47 |
var cs = element.currentStyle |
48 |
|
49 |
if (typeof s.boxSizing != "undefined" && s.boxSizing != "") |
50 |
return s.boxSizing; |
51 |
if (typeof s["box-sizing"] != "undefined" && s["box-sizing"] != "") |
52 |
return s["box-sizing"]; |
53 |
if (typeof cs.boxSizing != "undefined" && cs.boxSizing != "") |
54 |
return cs.boxSizing; |
55 |
if (typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != "") |
56 |
return cs["box-sizing"]; |
57 |
return getDocumentBoxSizing(); |
58 |
} |
59 |
|
60 |
function getDocumentBoxSizing() { |
61 |
if (doc.compatMode == null || doc.compatMode == "BackCompat") |
62 |
return "border-box"; |
63 |
return "content-box" |
64 |
} |
65 |
|
66 |
/* width and height setters */ |
67 |
function setBorderBoxWidth(n) { |
68 |
element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() - |
69 |
getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px"; |
70 |
} |
71 |
|
72 |
function setBorderBoxHeight(n) { |
73 |
element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() - |
74 |
getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px"; |
75 |
} |
76 |
|
77 |
function setContentBoxWidth(n) { |
78 |
element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() + |
79 |
getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px"; |
80 |
} |
81 |
|
82 |
function setContentBoxHeight(n) { |
83 |
element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() + |
84 |
getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px"; |
85 |
} |
86 |
/* end width and height setters */ |
87 |
|
88 |
function updateBorderBoxWidth() { |
89 |
element.runtimeStyle.width = ""; |
90 |
if (getDocumentBoxSizing() == getBoxSizing()) |
91 |
return; |
92 |
var csw = element.currentStyle.width; |
93 |
if (csw != "auto" && csw.indexOf("px") != -1) { |
94 |
if (getBoxSizing() == "border-box") |
95 |
setBorderBoxWidth(parseInt(csw)); |
96 |
else |
97 |
setContentBoxWidth(parseInt(csw)); |
98 |
} |
99 |
} |
100 |
|
101 |
function updateBorderBoxHeight() { |
102 |
element.runtimeStyle.height = ""; |
103 |
if (getDocumentBoxSizing() == getBoxSizing()) |
104 |
return; |
105 |
var csh = element.currentStyle.height; |
106 |
if (csh != "auto" && csh.indexOf("px") != -1) { |
107 |
if (getBoxSizing() == "border-box") |
108 |
setBorderBoxHeight(parseInt(csh)); |
109 |
else |
110 |
setContentBoxHeight(parseInt(csh)); |
111 |
} |
112 |
} |
113 |
|
114 |
function checkPropertyChange() { |
115 |
var pn = event.propertyName; |
116 |
var undef; |
117 |
|
118 |
if (pn == "style.boxSizing" && element.style.boxSizing == "") { |
119 |
element.style.removeAttribute("boxSizing"); |
120 |
element.runtimeStyle.boxSizing = undef; |
121 |
} |
122 |
|
123 |
|
124 |
switch (pn) { |
125 |
case "style.width": |
126 |
case "style.borderLeftWidth": |
127 |
case "style.borderLeftStyle": |
128 |
case "style.borderRightWidth": |
129 |
case "style.borderRightStyle": |
130 |
case "style.paddingLeft": |
131 |
case "style.paddingRight": |
132 |
updateBorderBoxWidth(); |
133 |
break; |
134 |
|
135 |
case "style.height": |
136 |
case "style.borderTopWidth": |
137 |
case "style.borderTopStyle": |
138 |
case "style.borderBottomWidth": |
139 |
case "style.borderBottomStyle": |
140 |
case "style.paddingTop": |
141 |
case "style.paddingBottom": |
142 |
updateBorderBoxHeight(); |
143 |
break; |
144 |
|
145 |
case "className": |
146 |
case "style.boxSizing": |
147 |
updateBorderBoxWidth(); |
148 |
updateBorderBoxHeight(); |
149 |
break; |
150 |
} |
151 |
} |
152 |
|
153 |
init(); |
154 |
|
155 |
//]]> |
156 |
</script> |
157 |
</component> |