Javascript 获取指定div的位置，然后创建新div并对其应用位置_Javascript_Jquery_Html_Css

Javascript 获取指定div的位置，然后创建新div并对其应用位置

javascript jquery html css

Javascript 获取指定div的位置，然后创建新div并对其应用位置,javascript,jquery,html,css,Javascript,Jquery,Html,Css,因此，我创建了一个“添加”按钮，它是一个简单的圆圈，在悬停时，它会在周围打开一些选项，这些选项可以单击，如添加的图像所示悬停正常不悬停当您单击其中一个周围图元时，它会隐藏除您单击的图元以外的所有其他图元，当您将鼠标悬停在关闭位置时，隐藏的图元将再次可见我的问题是，当一个被点击时，另一个3分区zone 1、zone 2和zone 3将使用JavaScript动态创建，并以与所附图像类似的样式定位在点击的元素周围但我显然有一个问题，就是找到位置，然后根据单击的元素以及它是在左下右下还是

因此，我创建了一个“添加”按钮，它是一个简单的圆圈，在悬停时，它会在周围打开一些选项，这些选项可以单击，如添加的图像所示

悬停

正常不悬停

当您单击其中一个周围图元时，它会隐藏除您单击的图元以外的所有其他图元，当您将鼠标悬停在关闭位置时，隐藏的图元将再次可见

我的问题是，当一个被点击时，另一个3分区zone 1、zone 2和zone 3将使用JavaScript动态创建，并以与所附图像类似的样式定位在点击的元素周围

但我显然有一个问题，就是找到位置，然后根据单击的元素以及它是在左下右下还是在上，将这3个新div添加到正确的位置

谢谢

<head>
    <title>Add Button</title>
    <link href="css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/style.css">  
</head>

<body>
    <header>
        <div class="add-button">
            <div class="sub-button tl" id="temp" onclick="addNew(this.id)"><i class="mdi mdi-temperature-celsius"></i></div>
            <div class="sub-button tr" id="light"><i class="mdi mdi-weather-sunny"></i></div>
            <div class="sub-button bl" id="fridge"><i class="mdi mdi-fridge"></i></div>
            <div class="sub-button br" id="kettle"><i class="mdi mdi-coffee"></i></div>
            <div class="sub-button tlo" id="cup"><i class="mdi mdi-cup"></i></div>
            <div class="sub-button tro" id="lamp"><i class="mdi mdi-lightbulb-outline"></i></div>
            <div class="sub-button bro" id="sound"><i class="mdi mdi-microphone-outline"></i></div>
            <div class="sub-button blo" id="noise"><i class="mdi mdi-speaker"></i></div>
        </div>
</header>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>


<script>
    var type;
    var elements = ["temp", "light", "fridge", "kettle", "cup", "lamp", "sound", "noise"];

    function addNew(id){
        type = id;
        for(i = 0; i < elements.length; i++){
            if(elements[i] != type){
                document.getElementById(elements[i]).style.display = "none"; 
            }
        }
        /*var div1 = document.createElement('div'); 
        div1.className = '';
        var elementStyle = document.getElementById("id").style;
        elementStyle.position = "relative";
        elementStyle.top = elementStyle.left = "50%";*/
    }

    function initialise(){
        for(i = 0; i < elements.length; i++){
            document.getElementById(elements[i]).style.display = "block"; 
        }
    }


    $(document).ready(function() {
        $('.add-button').hover(
           function () {
           }, 
           function () {
               initialise();
           }
        );
    });
</script>
</body>

使用position元素：

谢谢：唯一的问题是，它会将其放在请求的div前面，但我的问题是，现在我希望他们在div周围，而不仅仅是在div上面，并且使用您建议的方法，我想不出办法让他们在div周围，而不仅仅是在div上方。所以现在你想让它们相对地与图像中的一样。pos对象有左属性和顶属性，你现在必须使用它们，并对主对象周围的每个对象修改它们。嗨，我有最后一个问题要问你。。。关于使用.push添加值，我一直在尝试这样做。。。。。数据集[data1][3]=“10”；因此，在data1数组的第3个位置，我加上值10。我感觉自己的代码正在被破坏，因为我一直遇到一些奇怪的错误，没有任何附加值。一方面，请记住，[3]是第四位，而不是第三位，它是基于0的。另一方面，只有在数组[data1]已经定义了该位置的情况下，才能这样做。您不能这样做：var a=[]；a[3]=1；，但是您可以执行var a=[0,0,0,0]；a[3]=1；

var $existingDiv = $("#div1"),
    pos = $existingDiv.position(),
    $newDiv = $("<div></div>").css({
        "background-color": "red",
        "position": "absolute"
    });
$newDiv.css(pos);
$existingDiv.after($newDiv);
$existingDiv.remove();