元素坐標:
x:$(this).position().left
y:$(this).position().top
元素邊框大小:
邊框大小=($(this).outerWidth()-$(this).innerWidth())/ 2
真實大小:
w:$(this).outerWidth()
h:$(this).outerHeight()
創建元素的事件:
var __s = document.createElement("span");
__s.onclick = function () {
//do something
}
<script type="text/javascript">
$(function () {
var img = "<img src=\"dateSelect.png\" width=\"16\" height=\"16\" alt=\"tooltip\" title=\"tooltip\" />";
$("input[type='text']").each(function (i) {
//位置x
var __x = $(this).position().left;
//位置y
var __y = $(this).position().top;
//外部寬度
var __ow = $(this).outerWidth();
//內部寬度
var __iw = $(this).innerWidth();
//外部高度
var __oh = $(this).outerHeight();
//內部高度
var __ih = $(this).innerHeight();
//邊框寬度
var __b = (__ow – __iw) / 2;
$(this).val(__b);
//可以使用圖標
if (__ow > 16 && __oh > 16) {
//創建新標簽放在原始位置右側
var __s = document.createElement("span");
//樣式
__s.className = "__o";
//寬度
__s.style.width = "16px";
//高度
__s.style.height = "16px";
//left
__s.style.left = __x + __b + __iw – 16 + "px";
//right
__s.style.top = __y + __b + (__ih – 16) / 2 + "px";
//內容
__s.innerHTML = img;
//事件
__s.onclick = function () {
alert(i);
}
//添加到body中
var __o = document.getElementsByTagName("body")[0].appendChild(__s);
}
});
});
</script>