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