[英]How to a create dynamic button using JavaScript?
我想使用onclick function 創建一個動態按鈕，我創建了這個簡單的按鈕。 我想在單擊一次時更改按鈕的“id”。 當第二次點擊它時，我想取回第一個 id。 所以我將能夠為不同的 styles 應用兩個 CSS。
我已經更改了一次“id”，但是當第二次單擊按鈕時，如何才能獲得第一個“id”？
function change_style() { var x = document.getElementById("id-1"); x.id = "id-2"; }
#id-1 { width: 80px; height: 50px; background-color: red; color: #fff; } #id-2 { width: 80px; height: 50px; background-color: pink; color: #000; }
<button type="submit" onclick="change_style()" id="id-1">Button</button>
使用class代替id並在button單擊時切換 class。
function change_style() { var x = document.getElementById("id-1"); x.classList.toggle('btn2') }
.btn1{ width: 80px; height: 50px; background-color: red; color: #fff; }.btn2{ width: 80px; height: 50px; background-color: pink; color: #000; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <button type="submit" onclick="change_style()" id="id-1" class="btn1">Button</button> </body> </html> id屬性應該用於標識元素。 class屬性也可以用於此目的，但 id 是唯一的。
但是，使用類，您可以在 CSS 中創建狀態。 例如，普通按鈕的顏色為紅色，而添加了某個 class 的按鈕具有不同的顏色，具體取決於 CSS styles。
在 JavaScript 中，您可以通過從要更改的元素中添加或刪除 class 來控制哪些 styles 應該應用於元素。
const button = document.getElementById('dynamic-button'); function changeButtonStyle() { button.classList.toggle('styled'); } button.addEventListener('click', changeButtonStyle);
/* Default styling without a class */ #dynamic-button { width: 80px; height: 50px; background-color: red; color: #fff; } /* Styles with the class added. */ #dynamic-button.styled { width: 80px; height: 50px; background-color: pink; color: #000; }
<button id="dynamic-button">Button</button>
將按鈕作為“this”傳遞給 function：
onclick="change_style(this)"
然后將 ID 從 1 更改為 2，或將 2 更改為 1。
function change_style(button) { // extract number from button const idNum = Number(buttonid.split('-')[1]); // determine new ID number const newNum = (idNum === 1)? 2: 1; // set button's new ID button.id = 'id-' + newNum; }
#id-1 { width: 80px; height: 50px; background-color: red; color: #fff; } #id-2 { width: 80px; height: 50px; background-color: pink; color: #000; }
<button type="submit" onclick="change_style(this)" id="id-1">Button</button>
盡管如果您只是更改按鈕的樣式，則使用class比id更好地處理。
所以你可以使用 getAttribute
function change_style() { const x = document.querySelector('button') let val = x.getAttribute('id') x.id = val === 'id-1'? 'id-2': 'id-1' }
#id-1{ width: 80px; height: 50px; background-color: red; color: #fff; } #id-2{ width: 80px; height: 50px; background-color: pink; color: #000; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <button type="submit" onclick="change_style()" id="id-1">Button</button> </body> </html>
上面的答案解釋了一切，但我有一些詳細的方法來解決你的問題。
我們怎樣才能實現？ 您可以將 class 添加到按鈕，因為您想更改按鈕的 id 並且一旦 id 更改就不可能恢復按鈕，因此我們將使用 document.getElementById("id") 而不是使用 document.getElementById("id")。查詢選擇器（“.class”）
在上述方式中，如果我們更改按鈕的 id，那么我們也將取回按鈕，我們可以用它做任何我們想做的事情。
現在回到你的問題：
<button type="submit" class='Btn_1' onclick="change_style()" id="id-1">Button</button>
function change_style(){
let btn = document.querySelector('.Btn_1')
console.log(btn.id)
if(btn.id === "id-1"){
btn.id = "id-2"
}else if(btn.id === "id-2"){
btn.id = "id-1"
}
}
就像我告訴你的那樣，這是一種冗長的方式，而不是切換它，我們使用它來讓你了解正在發生的事情以及 id 是如何變化的。
在上面的代碼中，我們使用 if 語句並檢查該 id 是否存在，如果為 true，則更改為 id2，否則返回第一個。
希望你發現這很有用。
如何使用javascript或jquery創建動態tbody onclick按鈕
[英]How to Create dynamic tbody onclick of button using javascript or jquery
如何使用動態數據創建動態按鈕並在按鈕單擊角度時獲得動態值
[英]How to create a dynamic button using dynamic data and get dynamic values on the button click in angular
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.