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

【问题标题】：How to set CSS on body tag to rotate a page using JavaScript如何在 body 标签上设置 CSS 以使用 JavaScript 旋转页面
【发布时间】：2014-04-02 08:35:06
【问题描述】：

我在阅读此页面上的相关问题时发现了以下代码：Rotate a webpage clockwise or anticlockwise

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

--

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

当访问者点击图片时，我想通过上面的设置使用 JavaScript 来修改 HTML 标签的样式。

提前致谢。

【问题讨论】：

阅读stackoverflow.com/questions/14675820/…
我接受了我所做的那个，因为它是纯 Javascript .. 但是 JQuery 的也是很好的答案。谢谢！
其实那个链接有纯javascript代码

标签： javascript html css

【解决方案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 功能，因此您可能不需要support 旧版浏览器。因此，您也可以使用Element.classList 来添加一个类。

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

JavaScript：

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

另见：Change an element's class with JavaScript

【讨论】：

【解决方案2】：

您在 HTML 节点上使用 style attribute。

这样的事情可以做到：

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

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

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

【讨论】：

【解决方案3】：

简单

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

【讨论】：

谢谢 - 我喜欢这个简单的。
我的好习惯是至少在你的回答中给出一些解释。此外，OP 没有提到使用 jQuery。

【解决方案4】：

为此定义一个类：-

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

点击按钮，运行：-

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

**JQUERY**

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

只有 js

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

【讨论】：