元素坐标:
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 = "
";
$("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》