Question

我想在用户点击按钮时将此div旋转180度。

<div class="game-wrapper">
...
</div>

我在JavaScript中使用此代码。

$scope.rotate = function () {
    var x = document.getElementsByClassName("game-wrapper");
    x.style.transform = "rotate(180deg)";
}

我收到了这个错误：

TypeError：无法设置属性＆＃39;转换＆＃39;未定义的

在Scope。$ scope.rotate（controllers.js：421）

我也使用AngularJS。

Answer 1

常规DOM API不像jQuery API那样工作（设置值时隐式循环集合中的所有元素）。

您的HTML表明该类中只有一个此元素。所以你可以用x[0]得到第一个元素。

但是，对于一般建议，您需要循环返回的集合并将其应用于每个单独的元素。

var x = document.getElementsByClassName("game-wrapper");
Array.protoype.forEach.call(x, function(y) {
   y.style.transform = "rotate(180deg)";
});

如果您的平台支持您或您正在转发到ES4，请使用Array.from()将您的收藏集转换为常规数组。

Answer 2

像@alex说的那样。但除此之外，请注意element.style.transform在每个浏览器中都不起作用，因为您需要为每个支持的浏览器添加前缀：

element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";

使用CSS时也是如此：

// loop from Alex' answer
Array.protoype.forEach.call(x, function(y) {
   y.classList.add('rotated');
});

CSS：

.rotated {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

Answer 3

嗨，请检查代码，

 <!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://code.angularjs.org/1.0.8/angular.js" data-semver="1.0.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <div class="container-div {{rotateclass}}" ng-class="{{rotateclass}}">Hello</div>
    <button ng-click="handleAnchorClick()">Click me</button>

  </body>

</html>

和控制器

var app = angular.module('plunker', []);

app.controller（'MainCtrl'，function（$ scope）{ $ scope.name ='世界';

$scope.handleAnchorClick = function() {
   $scope.rotateclass = "roratediv"
};

}）;

并检查预览链接

https://plnkr.co/edit/Sp107XonpFuduCEQyccb?p=preview

Answer 4

您可以按以下方式旋转它：设置变量以定位元素单击按钮时运行功能。该函数采用div的样式并旋转180度

var button = document.querySelector('.button-they-can-click');
var gameWrap = document.querySelector('.game-wrapper');

button.addEventListener('click', function(){
  gameWrap.style.webkitTransform = 'rotate(180deg)';
  gameWrap.style.MozTransform = 'rotate(180deg)';
  gameWrap.style.msTransform = 'rotate(180deg)';
  gameWrap.style.OTransform = 'rotate(180deg)';
  gameWrap.style.transform = 'rotate(180deg)';
})

Answer 5

Hi please refer this link which i use the angular

https://plnkr.co/edit/Sp107XonpFuduCEQyccb?p=preview

如何使用JavaScript旋转div？

5 个答案: