如何使用JavaScript旋转div？_Javascript_Rotatetransform

如何使用JavaScript旋转div？

javascript

如何使用JavaScript旋转div？,javascript,rotatetransform,Javascript,Rotatetransform,当用户单击按钮时，我想将这个div旋转180度 <div class="game-wrapper"> ... </div> 我得到一个错误： TypeError:无法设置未定义的属性“transform” 在作用域处$Scope.rotate（controllers.js:421）我还使用AngularJS。常规DOM API的工作方式与jQuery API（设置值时隐式循环集合中的所有元素）不同 HTML表明类中只有一个元素。因此，您可以使用x[

当用户单击按钮时，我想将这个div旋转180度

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

我得到一个错误：

TypeError:无法设置未定义的属性“transform”

在作用域处$Scope.rotate（controllers.js:421）

我还使用AngularJS。

常规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)";
});

使用

Array.from（）

将您的集合转换为常规数组（如果您的平台支持它或您正在传输到ES4）

Hi please refer this link which i use the angular

就像@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:

您好，请检查代码

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

应用程序控制器（'MainCtrl'，函数（$scope）{ $scope.name='World'

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

}))

并检查预览链接

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

可以按以下方式旋转它：将变量设置为目标元素单击按钮时运行函数。该函数采用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)';
})

你的链接不仅对我没有任何帮助，而且使问题大大复杂化了。此外，通常最好在这里发布代码，而不是仅仅链接（否则，如果外部站点关闭，您的答案将变得无用），我想在用户单击按钮时将此div旋转180度。这就是你所说的问题，在我提到的链接中，你还期待什么，或者有什么错，因为我不是最初的提问者，但是正如我在回复中所说，你的链接对我不起作用。我点击按钮，什么也没发生。由于我使用的是最新版本的Chrome，所以可以肯定地说，这可能不会对大多数人起作用。请查看上述回复

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

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

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