如何使用 Javascript 添加 Id 属性？

Question

这里的任何人都可以帮助我解决我的问题。 我一直在尝试在单击按钮时创建按钮的 ID。 我的页面中有多个按钮，我想在单击它时添加 id 属性，但请注意，在单击此按钮之前没有 id。 这是我的一些代码。

<div class="DivButton" style="" onclick="divClick()"></div>
<div class="DivButton" style="" onclick="divClick()"></div>
<div class="DivButton" style="" onclick="divClick()"></div>

这是我的 Html 代码

function divClick()
{
    $(this).attr("id") =="Active";     
}

这是我的 JavaScript function 但这并没有达到预期。

Answer 1

您可以将this传递给divClick function。

 function divClick(e){ e.id = "Active"; console.log(e); }

 <div class="DivButton" style="" onclick="divClick(this)">a</div> <div class="DivButton" style="" onclick="divClick(this)">b</div> <div class="DivButton" style="" onclick="divClick(this)">c</div>

Answer 2

let btn = document.querySelector('DivButton'); btn.setAttribute("id","Active");

Answer 3

使用内联事件处理程序通常不是一个好主意。

如果你只给元素添加一个 id，你最终会得到重复的 id，这在 html 中是不允许的。 最好使用 an.active css-class。

该片段使用事件委托。

 document.addEventListener("click", handle); function handle(evt) { if (evt.target.classList.contains("DivButton")) { document.querySelectorAll(".DivButton").forEach( bttn => bttn.classList.remove("active") ); return evt.target.classList.add("active"); } }

 .DivButton { cursor: pointer; width: 125px;l height: 2rem; line-height: 2rem; text-align: center; border: 1px solid #999; margin: 0.3rem; }.active { color: red; background-color: #FFFFC0; }

 <div class="DivButton active">a</div> <div class="DivButton">b</div> <div class="DivButton">c</div>

Answer 4

试试这个 html 代码

<div class="DivButton" style="" onclick="divClick(this)">Button1</div>
<div class="DivButton" style="" onclick="divClick(this)">Button2</div>
<div class="DivButton" style="" onclick="divClick(this)">Button3</div>

Javascript 代码 id 应该是唯一的

<script>
function divClick(e){
 e.id = Math.floor(Math.random() * 10);   
 }
</script>

Answer 5

您可能应该检查id active 是否存在，如果存在则将其删除，这样可以将其添加到新按钮中。

 function divClick(e,idToAdd){ if(document.querySelector('#active')){ document.querySelector('#active').removeAttribute('id'); } e.id = 'active'; }

 .DivButton { display: inline-block; margin: 1rem; padding: .5rem 3rem; background: #000; color: #fff; cursor: pointer; } #active { background: red; }

 <div class="DivButton" style="" onclick="divClick(this)">a</div> <div class="DivButton" style="" onclick="divClick(this)">b</div> <div class="DivButton" style="" onclick="divClick(this)">c</div>