首页 > PHP资讯 > HTML5培训技术 > js向body创建对象、对象属性、对象事件,js获取元素坐标

js向body创建对象、对象属性、对象事件,js获取元素坐标

HTML5培训技术
元素坐标:
    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》  
 

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持37不支持0