js向body创建对象、对象属性、对象事件,js获取元素坐标、元素边框大小、真实大小

2021年9月4日 9点热度 0条评论 来源: dhfekl

元素坐标:

    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>

    原文作者:dhfekl
    原文地址: https://blog.csdn.net/dhfekl/article/details/16983947
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。