Question

我有两个div，我有两个按钮。点击按钮，我想提醒＆＃34;顶部＆＃34; div的style属性，代码如下：

然而，当我点击按钮时，他们返回的内容是＆＃34; undefined＆＃34;。如果你能让我知道我哪里出错了，我将不胜感激。

HTML：

<div id="container">
    <div id="section_1"></div>
    <div id="section_2"></div>
    <button id="edit_1" onClick="edit(1);"></button>
    <button id="edit_2" onClick="edit(2);"></button>
</div>

的javascript：

function edit(clicked_edit) {
    var tp=document.getElementById('section_'+clicked_edit).top;
    alert(tp);
}

CSS：

*{
    margin:0px;
    padding:0px;
}

body{
    width:100%;
    background-color:#F4F4F2;
    margin-top:15px;
    font-family:verdana;
}

#container{
    width:820px;
    height:400px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    border: dashed 2px blue;
    position:relative;
    z-index:1;
}

#section_1{
    width:800px;
    height:198px;
    border-top: solid 2px #D24726;
    background-color:#ffcccc;
    top:0px;
    position: absolute;
    z-index:2;
}

#section_2{
    width:800px;
    height:198px;
    border-top: solid 2px #14826D;
    background-color:#C1FBDE;
    top:200px;
    position: absolute;
    z-index:2;
}

#edit_1{
    width:50px;
    height:15px;
    position:absolute;
    margin-left:740px;
    margin-top:15px;
    border:none;
    cursor:pointer;
    z-index:4;
    background-color:red;
}

#edit_2{
    width:50px;
    height:15px;
    position:absolute;
    margin-left:740px;
    margin-top:215px;
    border:none;
    cursor:pointer;
    z-index:4;
    background-color:green;
}

Answer 1

Js Fiddle

将.top更改为.offsetTop您将获得职位

function edit(clicked_edit) {
    var tp = document.getElementById('section_' + clicked_edit).offsetTop;
    alert(tp);
}

修改

进行更改以将div设置为与偏移值
相同的位置
function edit(clicked_edit) { var tp = document.getElementById('section_' + clicked_edit).offsetTop; document.getElementById('expansion').style.top = tp + 'px'; // need to add this document.getElementById('expansion').style.display = 'block'; }

Answer 2

为此，您将以这种方式使用window对象的getComputedStyle方法：

function edit(clicked_edit) {
    var el = document.getElementById('section_'+clicked_edit);
        top = window.getComputedStyle(el, null).getPropertyValue('top')
    alert(top);
}

＆＃13;

function edit(clicked_edit) {
    var el = document.getElementById('section_' + clicked_edit),
        top = window.getComputedStyle(el, null).getPropertyValue('top')
    alert(top);
}

＆＃13;

* {
    margin:0px;
    padding:0px;
}
body {
    width:100%;
    background-color:#F4F4F2;
    margin-top:15px;
    font-family:verdana;
}
#container {
    width:820px;
    height:400px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    border: dashed 2px blue;
    position:relative;
    z-index:1;
}
#section_1 {
    width:800px;
    height:198px;
    border-top: solid 2px #D24726;
    background-color:#ffcccc;
    top:0px;
    position: absolute;
    z-index:2;
}
#section_2 {
    width:800px;
    height:198px;
    border-top: solid 2px #14826D;
    background-color:#C1FBDE;
    top:200px;
    position: absolute;
    z-index:2;
}
#edit_1 {
    width:50px;
    height:15px;
    position:absolute;
    margin-left:740px;
    margin-top:15px;
    border:none;
    cursor:pointer;
    z-index:4;
    background-color:red;
}
#edit_2 {
    width:50px;
    height:15px;
    position:absolute;
    margin-left:740px;
    margin-top:215px;
    border:none;
    cursor:pointer;
    z-index:4;
    background-color:green;
}

＆＃13;

<div id="container">
    <div id="section_1"></div>
    <div id="section_2"></div>
    <button id="edit_1" onClick="edit(1);"></button>
    <button id="edit_2" onClick="edit(2);"></button>
</div>

＆＃13;

返回＆＃34;顶部＆＃34;使用javascript标记的属性

2 个答案: