如何使用JavaScript旋转div？
[英]How to rotate a div using JavaScript?
问题描述
我想在用户单击按钮时将此div旋转180度。
<div class="game-wrapper">
...
</div>
我在JavaScript中有这段代码。
$scope.rotate = function () {
var x = document.getElementsByClassName("game-wrapper");
x.style.transform = "rotate(180deg)";
}
我收到此错误：
TypeError：无法设置未定义的属性“ transform”
在Scope。$ scope.rotate（controllers.js：421）
我也在使用AngularJS。
5 个解决方案
解决方案1
1 2016-06-03 09:19:57
常规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()将您的集合转换为常规数组。
解决方案2
0 2016-06-03 09:49:10
就像@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);
}
解决方案3
0 2016-06-03 10:03:36
嗨，请检查代码，
<!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 ='World';
$scope.handleAnchorClick = function() {
$scope.rotateclass = "roratediv"
};
}）;
并检查链接以进行预览
https://plnkr.co/edit/Sp107XonpFuduCEQyccb?p=preview
解决方案4
0 2019-05-13 09:35:43
您可以通过以下方式旋转它：设置变量以将元素作为目标。单击按钮时运行一个函数。 该函数采用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)';
})
解决方案5
-1 2016-06-03 09:40:17
Hi please refer this link which i use the angular
如何将按钮固定在 div 上，同时其背景图像可以旋转。 仅使用 Javascript？
[英]How to keep button fixed on a div while background- image of this can rotate. Using Javascript Only?
使用javascript在div内顺时针或逆时针旋转图像
[英]Rotate image clockwise or anticlockwise inside a div using javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.