Javascript 附加的div未正确定位_Javascript_Css_Dom

Javascript 附加的div未正确定位

javascript css dom

Javascript 附加的div未正确定位,javascript,css,dom,Javascript,Css,Dom,我的代码： <body> <div id ="container" style="position:relative;margin-top:50px;width:100px;height:100px;border: 2px solid #a1a1a1;"/> <button onclick="myFunction()">Append</button>

我的代码：

<body>                                      
     <div id ="container" style="position:relative;margin-top:50px;width:100px;height:100px;border: 2px solid #a1a1a1;"/>
     <button onclick="myFunction()">Append</button>             

<script type="text/javascript" language="javascript">

        function myFunction() {
            var tooltipdivRect = $("<div id=" + "ToolTip></div>");
            $(tooltipdivRect).css('top', '20px', 'left', '0px', 'width', '20px', 'height', '20px', "border-color", 'red', 'border', '2px solid #a1a1a1', 'position', 'absolute');
            $(tooltipdivRect).html("check")
            document.getElementById("container").appendChild(tooltipdivRect[0]);
        }
     </script>             
</body>


追加
函数myFunction（）{
var tooltipdivRect=$（“”）；
$（tooltipdivRect）.css（'top'，'20px'，'left'，'0px'，'width'，'20px'，'height'，'20px'，'border color'，'red'，'border'，'2px solid#a1a1a1'，'position'，'absolute'）；
$（tooltipdivRect）.html（“检查”）
document.getElementById（“容器”）.appendChild（tooltipdivRect[0]）；
}

当我附加工具提示

div

时，它无法附加确切位置。。我设置的位置顶部为20，但它被附加在50。。。因为父div位置是相对的。。。我需要附加工具提示div我提到的确切位置

如何在不改变位置（父级和子级）的情况下解决此问题？

我认为问题在于.css（）调用。唯一应用于元素的样式是top:20px

这是您的方法调用：

$(tooltipdivRect).css('top', '20px', 'left', '0px', 'width', '20px', 'height', '20px', "border-color", 'red', 'border', '2px solid #a1a1a1', 'position', 'absolute');

这就是在对象内部使用css样式所需要的方式

$(tooltipdivRect).css({
    'top': '50px', 
    'left': '0px', 
    'width': '20px', 
    'height': '20px', 
    "border-color": 'red',
    'border': '2px solid #a1a1a1', 
    'position': 'absolute'
 });

假设您只想在div

#容器中插入一个工具提示
这样做的方式是尝试手动插入一个充当工具提示的div。创建时：var tooltipdivRect=$（“”）

我的建议是，要么你做一些更干净的事情，比如：
function myFunction() {
    var tooltipdivRect = $("<div id='manualTooltip'></div>");
    $(tooltipdivRect).html("check")
    $("#container").append(tooltipdivRect);
}

或您只需为div容器设置一个标题：
function appendTitleToDiv(){
    $("#container").attr("title", "check");
}

您可以在这里看到这两种解决方案：如果您使用jQuery，请相应地标记问题。我需要在div（容器）外显示工具提示。。。在不改变位置的情况下…那么，当您单击按钮时，您需要在div容器的正下方（而不是内部）显示工具提示？
function appendTitleToDiv(){
    $("#container").attr("title", "check");
}