Question

为什么我无法阅读object.style.left＆amp; object.style.top值？

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

我可以使用javascript重置style.left＆amp;执行此操作的style.top值：

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

但我的问题是我需要动态重置'style.left'＆amp; 'style.top'值，使用需要在网页加载时动态确定的缩放系数。

以我的新手思维方式，这意味着我需要：

•获取style.left＆amp; style.top值

•将它们乘以比例因子

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

问题在于我无法获得style.left＆amp; style.top值在第一位，所以我无法修改它们，更不用说它们了。

很明显，我做错了什么＆amp;我不理解我应该理解的东西。

那么我做错了什么？

我错过了什么？

最重要的是，我如何获得style.left＆amp;的价值？ style.top以便我可以使用它们动态修改按钮的位置？

感谢大家的帮助和帮助。建议。

这是实际的HTML / CSS / Javascript代码......

<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>

Answer 1

theButton_ID是参数的名称

function Move_A_Button (theButton_ID)
{

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

document.getElementById(theButtonId).style.left;

你忘记了下划线

Answer 2

即使更正了拼写错误，该元素最初也没有top或left个样式，因为元素本身都没有设置。

element.offsetLeft和element.offsetTop是您最好的选择。

Answer 3

实际上，如果您不需要支持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”）给出，然后您必须将其作为数字数字之外，然后修改，然后当你添加它们时，你重新添加测量类型...... ...万岁

Javascript：为什么我不能阅读'object.style.left'＆amp; 'object.style.top'值？

3 个答案: