Question

下面函数中的e参数现在可以正常工作，但是如果它在函数中定义它可以工作。

这是一个参数，在底部调用:(失败）

＆＃13;

function getRotVal( e ) {
  var el = document.getElementById( e ),        //  e is a parameter in the function
      st = window.getComputedStyle( el, null ),
      tr = st.getPropertyValue( 'transform' ) || "FAIL",
      values = tr.split('(')[1].split(')')[0].split(','),
      a = values[0],
      b = values[1],
      c = values[2],
      d = values[3],
      scale = Math.sqrt(a*a + b*b),
      sin = b/scale,
      angle = Math.round(Math.atan2(b, a) * (180/Math.PI));

      return angle;
}

var box = document.getElementById( 'box' );
var result = getRotVal( box );

alert( result );

＆＃13;

.box {
  width: 5rem;
  height: 5rem;
  margin: 0.75rem auto;
  background-color: #222;
  transform: rotate( 15deg );
}

＆＃13;

<div id="box" class="box">
</div>

＆＃13;

在这里我在函数中定义变量:(它可以工作）

＆＃13;

function getRotVal() {
  var el = document.getElementById( 'box' ),        //  e is defined inside function
      st = window.getComputedStyle( el, null ),
      tr = st.getPropertyValue( 'transform' ) || "FAIL",
      values = tr.split('(')[1].split(')')[0].split(','),
      a = values[0],
      b = values[1],
      c = values[2],
      d = values[3],
      scale = Math.sqrt(a*a + b*b),
      sin = b/scale,
      angle = Math.round(Math.atan2(b, a) * (180/Math.PI));

      return angle;
}

var result = getRotVal();

alert( result );

＆＃13;

.box {
  width: 5rem;
  height: 5rem;
  margin: 0.75rem auto;
  background-color: #222;
  transform: rotate( 15deg );
}

＆＃13;

<div id="box" class="box">
</div>

＆＃13;

我希望这个函数是动态的并接受不同的变量，所以第二个片段并不是很好。如何让第一个片段工作并将e保留为变量？

Answer 1

您的函数调用document.getElementById(e)，因此它期望参数是ID，而不是元素。你应该像这样调用函数：

var result = getRotval('box');

或者不在函数中调用getElementById()。

Answer 2

在第一个片段中，您将DOM元素传递给getRotVal函数，并再次在DOM元素上使用getElementById。

所以只需注释el的第一行并将函数参数e直接传递给getComputedStyle，如下所示

// var el = document.getElementById( e ),        //  e is a parameter in the function
  st = window.getComputedStyle(e, null),

代码段：

function getRotVal(e) {
  // var el = document.getElementById( e ),        //  e is a parameter in the function
  var st = window.getComputedStyle(e, null),
    tr = st.getPropertyValue('transform') || "FAIL",
    values = tr.split('(')[1].split(')')[0].split(','),
    a = values[0],
    b = values[1],
    c = values[2],
    d = values[3],
    scale = Math.sqrt(a * a + b * b),
    sin = b / scale,
    angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));

  return angle;
}

var box = document.getElementById('box');
var result = getRotVal(box);

alert(result);

.box {
  width: 5rem;
  height: 5rem;
  margin: 0.75rem auto;
  background-color: #222;
  transform: rotate( 15deg);
}

<div id="box" class="box">
</div>

Answer 3

您不需要在函数参数中传递对象引用，因为你已经将它转换为引用，见下面一行中的函数。

var el = document.getElementById( e );

所以编辑调用getRotVal函数的位置如下：

var result = getRotVal("box");

除非我在函数中定义变量，否则传递变量不起作用

3 个答案: