如何使用javascript在鼠标单击时更改td中的css答案

【问题标题】：how to change the css in td on mouse click using javascript如何使用javascript在鼠标单击时更改td中的css
【发布时间】：2013-04-25 18:15:28
【问题描述】：

Uisng javascript，我试图在点击 td 时加载 css (id)。

在上图中，我在一个 td 中创建了主帐户持有人，并在另一个 td 中创建了授权记者。主帐户持有人选项卡应在加载时加载。我需要的是在单击授权记者选项卡时主帐户持有人和授权的 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 中编写代码。谁能告诉我如何编写代码。

【问题讨论】：

你所说的css id是什么意思，你想改变元素的id以便应用相应的css？
如何在鼠标点击时改变元素的id。
我会考虑不使用 id 并交换它们。而是使用类并更改类。 @Ahmed 的答案应该为您指明正确的方向。
好的，如何构建代码，如果你有一个小的示例请发帖，我会学习并做到这一点
简单的小提琴jsfiddle.net/yaA2x

标签： javascript html css javascript-events

【解决方案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';
   };

【讨论】：

由于 OP 对 Javascript 编程知之甚少，请包括编辑此以包括 document.GetElementByID()

【解决方案2】：

如果使用 jquery 或使用悬停，则应同时使用 mouseenter 和 mouseout 事件状态

【讨论】：

如何使用javascript，如果您知道请分享