0

为什么我无法读取object.style.left&object.style.top值?

我正在尝试动态移动按钮。

我可以通过这样做使用 javascript 来重置style.left&值:style.top

document.getElementById(theButton_ID).style.left = "128px";
document.getElementById(theButton_ID).style.top  =  "64px";

但我的问题是我需要使用在网页加载时需要动态确定的缩放因子来动态重置“style.left”和“style.top”值。

对于我的新手思维方式,这意味着我需要:

• 获取style.left&style.top

• 将它们乘以比例因子

• 将这些修改后的值分配给style.left&style.top值。

问题是我无法将style.left&style.top值放在第一位,所以我无法修改它们,更不用说将它们写回了。

所以很明显,我都做错了,我不理解我应该理解的东西。

那么我做错了什么?

我错过了什么?

最重要的是,我如何获得style.left&的值,style.top以便我可以使用它们来动态修改按钮的位置?

感谢大家的帮助和建议。

这是实际的 HTML/CSS/Javascript 代码……</p>

<html>
      <head>

         <title>Button Dynamic Move Test</title>

      <style type="text/css">

        #MoveButton
        {
            position    : absolute;
            left        :  8px;
            top     : 16px;
        }

     </style>

     <script>

//      var X_Index_Move_Factor = 1.25;
//      var Y_Index_Move_Factor = 1.50;

function Move_A_Button (theButton_ID)
{
alert (   "We're in 'Move_A_Button'"
        + "\n"
        + " The Button Id = "
        +   theButton_ID
        );              

var the_Old_Button_X_Offset = document.getElementById(theButtonId).style.left;

var the_Old_Button_Y_Offset = document.getElementById(theButtonId).style.top;

    alert (   "the_Old_Button_X_Offset = "
        + "\n"
        +   the_Old_Button_X_Offset   
        + "the_Old_Button_Y_Offset = "
        + "\n"
        +   the_Old_Button_Y_Offset
        );              
}

</script>
</head>

<body>

     <button type = "button"
       id       = "MoveButton" 
      onclick   = "Move_A_Button ('MoveButton')">
     About Us
    </button>

</body>
</html>
4

3 回答 3

2

实际上,如果您不需要支持 IE6 或 IE7(或大约 17 版本之前的 FireFox),那么获取内部数据的最佳方法是这样的:

// inside of your function:

var el = document.getElementById(button_id),
    dimensions = el.getBoundingClientRect();

console.log("old x: " + dimensions.left, "old y: " + dimensions.top);
console.log("new x: " + dimensions.left * scale_X, "new y: " + dimensions.top * scale_Y);

请记住,当您设置它们时,您还必须添加测量值:

el.style.top = (dimensions.top * scale_Y) + "px";
el.style.left = (dimensions.left * scale_X) + "px";

并且使用该getBoundingClient函数将为您提供数字形式的测量值,但.style.top/.style.left将为您提供字符串形式的测量值(“112px”),然后您必须从中提取数字,然后进行修改,然后当您将它们添加回来时,您添加测量类型重新打开... ...万岁

于 2013-05-08T03:03:17.810 回答
1

即使纠正了拼写错误,该元素最初也没有topleft样式,因为元素本身没有设置任何样式。

element.offsetLeft并且element.offsetTop是您最好的选择作为起点。

于 2013-05-08T02:52:45.623 回答
1

theButton_ID是参数的名称

function Move_A_Button (theButton_ID)
{

当你试图获得你写的风格时

document.getElementById(theButtonId).style.left;

你忘记了下划线

于 2013-05-08T02:47:04.657 回答