單擊按鈕/鏈接后如何分配新類（JavaScript）

Question

我正在嘗試向 HTML 正文添加新的 CSS 類，但僅在單擊按鈕/鏈接之后。 我已經包含了代碼以及一些錯誤信息。

我已經創建了一個函數，可以在單擊按鈕/鏈接后觸發警報。 它運行良好，但“.classList.add”方法/選項沒有任何效果。

<html>
<head>
    <style>
    .addBGoverlay {background-color: gray;}

    .bG {background-color: white;}
    </style>
</head>
<body class="BG">
    <a class="dash-menu mega-menu-link " role="button" href="#"><span class="mega-indicator"> navButtn</span></a>


<script type="text/javascript">
    var X = document.getElementsByClassName('dash-menu');
    var xLength = X.length;
    var bg = document.getElementsByTagName('body');

    function startAction() {
    alert('This a popUp');
    bg.classList.add("addBGoverlay");
    }

    for (var i = 0; i < xLength; i++) {
    X[i].addEventListener('click', startAction, false);
    }
    </script>
</body>
</html>

當我在 chrome 中檢查它時，它給了我一個錯誤“Uncaught TypeError: Cannot read property 'add' of undefined at HTMLAnchorElement.startAction”，下面的行以黃色突出顯示“bg.classList.add("addBGoverlay");”

Answer 1

嘗試將 ID 屬性添加到 body 標簽。

IE：

<body class="bg" id="dg_body">

js

var bg = document.getElementById('dg_body');

並更新 css 訂單：

.bG {background-color: white;}
.addBGoverlay {background-color: gray;}

將工作。

Answer 2

更改您的代碼：

bg.classList.add("addBGoverlay");

到：

bg.className += "addBGoverlay";

希望能幫助到你！

Answer 3

將它包含在 window.load 下應該可以解決它，因為它確保在您嘗試獲取元素之前 DOM 已准備就緒。

 window.onload(function() { var X = document.getElementsByClassName('dash-menu'); var xLength = X.length; var bg = document.getElementsByTagName('body'); function startAction() { alert('This a popUp'); bg.classList.add("addBGoverlay"); } for (var i = 0; i < xLength; i++) { X[i].addEventListener('click', startAction, false); } });

 .addBGoverlay { background-color: gray; } .bG { background-color: white; }

 <a class="dash-menu mega-menu-link " role="button" href="#"><span class="mega-indicator">navButtn</span></a>

Answer 4

只是改變

var bg = document.getElementsByTagName('body')[0];

這將修復錯誤。

Answer 5

getElementsByTagName() 方法將為您提供 DOM 元素的集合。 由於此集合沒有 classList 屬性，因此它將失敗。
您可以使用以下代碼修復它

bg[0].classList.add("addBGoverlay");

您還可以使用document.body而不是document.getElementsByTagName('body') 。 第一個 (document.body) 給你 body 對象，第二個給你一個集合對象

切換到之前的狀態

方法一

function startAction() {

    let body = document.body ;
    if(body.classList.contans("addBGoverlay")){ // body.classList.contans() method will give a Boolean return value
       body.classList.remove("addBGoverlay");
   }else{
       body.classList.add("addBGoverlay");
   }

}

方法二

var hasBGOverlay = false;
var body = document.body ;
function startAction() {

    if(hasBGOverlay){ 
           body.classList.remove("addBGoverlay");
    }else{
           body.classList.add("addBGoverlay");
    }
    hasBGOverlay  = !hasBGOverlay; // In each call state variable value will update with inverse value

}

希望這可以幫助

Answer 6

它必須解決你的問題。

你不需要為身體獲取一個元素。 文件有那個。 所以只需連接新類。

function startAction() {
    alert('This a popUp');
    document.body.className += "addBGoverlay";
}

單擊按鈕/鏈接后如何分配新類（JavaScript）

問題描述

6 個解決方案

解決方案1
0 2019-07-21 14:05:27

解決方案2
0 2019-07-21 14:07:11

解決方案3
0 2019-07-21 14:15:56

解決方案4
0 2019-07-21 14:23:55

解決方案5
0 已采納 2019-07-21 14:31:20

解決方案6
0 2019-07-21 14:47:13

單擊按鈕/鏈接后如何分配新類（JavaScript）

問題描述

6 個解決方案

解決方案1 0 2019-07-21 14:05:27

解決方案2 0 2019-07-21 14:07:11

解決方案3 0 2019-07-21 14:15:56

解決方案4 0 2019-07-21 14:23:55

解決方案5 0 已采納 2019-07-21 14:31:20

解決方案6 0 2019-07-21 14:47:13

解決方案1
0 2019-07-21 14:05:27

解決方案2
0 2019-07-21 14:07:11

解決方案3
0 2019-07-21 14:15:56

解決方案4
0 2019-07-21 14:23:55

解決方案5
0 已采納 2019-07-21 14:31:20

解決方案6
0 2019-07-21 14:47:13