Javascript 更改div'；s样式，并在单击另一个div时将其更改回

我在一个.hta文件中有许多div的类

trashitem

。单击一个特定的div后，我需要将其边框更改为3px和红色。当选择不同的div时，我需要将原始div恢复为其原始样式（1px黑色边框），并将第二个div的边框更改为3px红色

基本上一次只能有一个div是红色的

请选择纯JavaScript而不是jQuery。我假设我需要将一个类应用于单击的div，如果选择了另一个div，则将其从该类中删除，同时将第二个div添加到该类或其他什么

所有div都有class

trashitem

，但它们都引用了一个惟一的函数onclick，请参见以下内容：

<div class="trashitem" onclick="Writedata13()">
   <div class="photobox">
      <img src="http://www.fakeImage.JPG">
   </div>
</div>

<div class="trashitem" onclick="Writedata14()">
   <div class="photobox">
      <img src="http://www.fakeImage.JPG">
   </div>
</div>

<div class="trashitem" onclick="Writedata15()">
   <div class="photobox">
      <img src="http://www.fakeImage.JPG">
   </div>
</div>

---

更新代码

---

JAVASCRIPT

<script language="javascript">
function Writedata14(event)
{
 var a = event.target;  
 a.style.cssText = 'width:330px;height:10px;background-color:black';  
}
</script>

函数Writedata14（事件）
{
var a=事件目标；
a、 style.cssText='宽度：330px；高度：10px；背景色：黑色'；
}

HTML

---

链接到。

您可以获得正在单击的元素

 event.target; 

你可以做一些类似的事情

<script type="text/javascript">
        function Writedata13(){
             var a = event.target;  
             a.style.cssText = 'width:330px;height:10px;background-color:black';          
        }
</script>

函数Writedata13（）{
var a=事件目标；
a、 style.cssText='宽度：330px；高度：10px；背景色：黑色'；
}

请参阅此以获取有关它的更多信息

---

避免使用javascript内联，这是不推荐的

尝试使用此选项：

document.addEventListener（“DOMContentLoaded”，函数（）{
var myitem=document.queryselectoral（“.trashitem”）；
对于（h=0；h）“我假设我需要将一个类应用于单击的div，如果选择了另一个div，则将其从该类中删除，同时将第二个div添加到该类或其他内容？”-是的，的确如此。我已经在StackOverflow上搜索了大约1.5个小时，所有的解决方案都是jQuery。你能帮我吗？我不知道如何继续。除了让我觉得愚蠢之外，任何事情都是受欢迎的。谢谢。所有函数都做什么？鉴于命名，它们似乎可能做相同的事情，但只有细微的区别？我顺便说一句，请不要从您的问题中删除示例代码；链接到外部演示是一种奖励，但代码必须在问题本身中。我一定不会在将来删除代码，对此表示抱歉。关于函数做非常类似的事情，您是对的，唯一的区别是，例如，函数Writedata8（）将具有以下内容：s.WriteLine（document.getElementById（'mls_id8'）.value）；s.WriteLine（document.getElementById（'marker_id8'）.value）；而Writedata9（）将分别有mls_id9和marker_id9。可能有一个更干净的方法…这似乎是一个可能的解决方案，谢谢。两个问题：当我添加代码，然后单击div时，我得到错误：“无法获取未定义或空引用的属性“样式”这是指cssText部分吗？其次，您的解决方案似乎会改变一个div的样式，但如果之后单击另一个div，它会改变它吗？谢谢Spycomb
function Writedata13（）
应该声明为
function Writedata13（事件）
。然后您将拥有一个事件对象，您可以从中获取目标元素。感谢Golez，但现在我得到了与以前相同的错误，但现在它显示为“target”未定义或为空。这是一个codepen链接，但单击时我需要边框保持红色，直到单击另一个div。谢谢你们，但当我在.hta文件中运行此代码时，它会显示“对象不支持属性或方法'addEventListener'。这是指向我完整的.hta文件的链接，它很短。请帮助~@DavidThomas你是对的，这是一个打字错误，我更新了我的答案以修复它，并添加了一个工作示例。我使用的是.hta文件，请记住，因此当我运行你的代码时，它会给出错误：“对象不支持属性或方法‘addEventListener’。我猜这是HTA的问题。解决方案？谢谢你，Yandy你编辑的解决方案仍然包含文本‘addEventListener’，这正是导致我仍然出错的原因。我在这里找到了一个可能的解决方案，但不确定如何使其适应我的代码。你能帮忙吗？”？
<script type="text/javascript">
        function Writedata13(){
             var a = event.target;  
             a.style.cssText = 'width:330px;height:10px;background-color:black';          
        }
</script>