js向body創建對象、對象屬性、對象事件,js獲取元素坐標、元素邊框大小、真實大小

元素坐標:

    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>  

 

發佈留言