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

【问题标题】：Passing variable doesn't work unless I define the variable in function除非我在函数中定义变量，否则传递变量不起作用
【发布时间】：2017-04-29 14:20:00
【问题描述】：

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

这是一个参数并在底部调用：（失败）

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

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

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

我在这里定义了函数中的变量：（它有效）

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

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

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

我希望这个函数是动态的并接受不同的变量，所以第二个 sn-p 不是那么好。如何让第一个 sn-p 工作并将 e 作为变量？

【问题讨论】：

每个变量一个var。
@TatsuyukiIshi 我以为我看到了一个错字，但我弄错了。你是什么意思？我用逗号分隔变量。
@TatsuyukiIshi 我在第二个 sn-p 中发现了错字。我使用; 而不是逗号。还是第一个 sn-p 坏了？
使用逗号分隔相互依赖的事物并不美观。将它们拆分为单独的语句。

标签： javascript css function

【解决方案1】：

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

var result = getRotval('box');

要么这样，要么不要在函数中调用getElementById()。

【讨论】：

【解决方案2】：

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

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

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

代码 sn-p：

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>

【讨论】：

好，现在你要声明全局变量了。
你需要把var放在st =之前
@TatsuyukiIshi，巴马尔。更新了答案

【解决方案3】：

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

var el = document.getElementById( e );

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

var result = getRotVal("box");

【讨论】：