如何在 body 标签上设置 CSS 以使用 JavaScript 旋转页面

Question

我在本页阅读相关问题时发现了以下代码： 顺时针或逆时针旋转网页

html {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
}

——

我的问题是如何通过 JavaScript 设置这个 CSS？

当访问者单击图像时，我想使用 JavaScript 使用上述设置修改 HTML 标记的样式。

提前致谢。

Answer 1

最简单的方法是将它放在一个类中，并使用 JavaScript 动态分配该类：

CSS：

html.rotateme {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
}

JavaScript：

document.documentElement.setAttribute('class', 'rotateme'); //Note that this will override the current class

由于您使用的是最新的 CSS 功能，因此您可能不需要支持较旧的浏览器。 因此，您也可以使用Element.classList添加一个类。

为了防止在旧浏览器中抛出异常，您可以先检查它是否存在：

JavaScript：

document.documentElement.classList && document.documentElement.classList.add('rotateme'); //This won't  override the current class

另请参阅：使用 JavaScript 更改元素的类

Answer 2

您在 HTML 节点上使用style 属性。

像这样的事情会做到：

var htmlNode = document.documentElement;
htmlNode.style.webkitTransform = 'rotate(180deg)';
htmlNode.style.mozTransform = 'rotate(180deg)';

然后，要撤消旋转，请将值设置为空字符串：

var htmlNode = document.documentElement;
htmlNode.style.webkitTransform = '';
htmlNode.style.mozTransform = '';

Answer 3

简单的

$('#wrap').on('click',function(){
$('html').css('-webkit-transform','rotate(180deg)');
$('html').css('-moz-transform','rotate(180deg)');})

Answer 4

**JQUERY**

$("#imgID").on("click", function(){
    $('html').css({"-webkit-transform": "rotate(180deg)", "moz-transform": "rotate(180deg)"});
});

只有js

使用 user2428118 的答案，这是一个可靠的解决方案。

Answer 5

为此定义一个类：-

.htmlrotate {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
}

单击按钮，运行：-

document.documentElement.classList.add('htmlrotate');

Answer 6

  $('html').bind('click', function () {
                $('html').css({
                    '-webkit-transform': 'rotate(90deg)',
                    '  -moz-transform': 'rotate(90deg)'
                })
            });