javascript - 如何使用 JavaScript 在单击鼠标时更改 td 中的 CSS

Question

使用 JavaScript，我尝试在点击 td 时加载 CSS (id)。

在上图中，我在一个td中做了main account holder，在另一个td中做了authorized reporter。主要帐户持有人选项卡应在加载时加载。我需要的是在单击授权报告者选项卡时，主要帐户持有人和授权报告者的 CSS 应该更改。即，主要账户持有人的背景应在授权报告人处申请，反之亦然。

.css id 是:

#account_holder{
         background: url('{{ STATIC_URL }}images/main-account-holder.png')no-repeat;
         background-size:100%;-moz-background-size: cover;
         background-size: cover;-o-background-size: cover;
         -webkit-background-size: cover;
    }
    #authorised_reportericon{
         background: url('{{ STATIC_URL }}images/authorised_reporter-icon.png')no-repeat;
         background-size:100%;
         -moz-background-size: cover;
         background-size: cover;-webkit-background-size: cover;-o-background-size: cover;
         background-color:#F0F0F0;
         border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;
    }
    #account_holdericon{
         background: url('{{ STATIC_URL }}images/main-account-holder-icon.png')no-repeat;
         background-size:100%;
         -moz-background-size: cover;
         background-size: cover;
    } 
    #authorised_reporter{
         background: url('{{ STATIC_URL }}images/authorised_reporter.png')no-repeat;background-size:100%;
         -moz-background-size: cover;
         background-size: cover;
         background-color:#F0F0F0;
         border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;   
    } 

我想使用 JavaScript 在执行 onclick 时更改 CSS id。我不知道如何用 JavaScript 编写代码。谁能指导我如何编写代码？

Answer 1

ID 应该是唯一的。不要改变它们。改用类

在 Css 中将 # 替换为 .像下面这样:

.account_holder{
         background: url('{{ STATIC_URL }}images/main-account-holder.png')no-repeat;
         background-size:100%;-moz-background-size: cover;
         background-size: cover;-o-background-size: cover;
         -webkit-background-size: cover;
    }

以下是如何使用 javascript 更改元素的类名:

编辑:

 var your_element = document.getElementById('your_element_id');

   your_element.onclick = function(){
       this.className = 'account_holder';
   };