En realidad, toda mi función está integrada en javascript y busqué en Google para agregar data-bs-toggle usando js, pero todos mostraban jquery. Aquí está mi código:
function onload_function(params) { n = 100 for (let i = 0; i < n; i++){ elem = document.getElementById(i) //console.log(elem.textContent) try{ console.log(elem.textContent) new_elem = document.createElement('button'); new_elem.innerHTML = elem.textContent; new_elem.{{data-bs-target}} = '#support-tab-8'; <-- here new_elem.id = 'button-' + i.toString(); new_elem.classList.add("nav-link"); document.getElementById("dynamic-headings").appendChild(new_elem); } catch{ } }
Puede acceder a los atributos de datos utilizando la propiedad .dataset
y establecer el valor del atributo de datos que desea cambiar. Tenga en cuenta que, si bien los atributos de datos están escritos en kebab-case
en línea en html, en Javascript se accede a ellos con camelCase
. Por lo tanto, desea establecer el valor como este new_elem.dataset.bsTarget = "YourValue"
He adjuntado un fragmento que demuestra el procedimiento a continuación.
// We want to add the EventListeners only if the DOM is fully loaded to ensure that no issues happen. document.addEventListener('DOMContentLoaded', function(){ // Just for the sake of demonstrating I've added a button with an onClick Event to trigger the // change of the Data Attribute. In your code the change within might happen at any point. document.getElementById('btnChange').addEventListener('click', function(){ // We need the NodeElement of the Element we want to change the Data Attribute for. const el = document.querySelector('.my-span'); // If the Element exists we then change the Data attribute by just accessing the Dataset // property and define a property in the Dataset Object which is called the same as the // Attribute we want to set. But again, keep in mind that we write the Attribute here in // camelCase if(el) el.dataset.bsTarget = "MyValue"; }) });
.my-span[data-bs-target="MyValue"]{ background-color: red; }
<div class="container"> <span class="my-span">My Span Element</span> <button id="btnChange">Change Data Attribute</button> </div>