Los atributos de estilo en línea tienen valores como style = "color: green; background: red;" . Si quiero cambiar dinámicamente solo el fondo que cambio con el estilo de atributo de javascript, lo hago con: element.style.background = "blue" .
Cómo crear "atributos personalizados" para que los valores dentro de un atributo cambien dinámicamente.
Por ejemplo: myAttributes = "car: mercedes; truck: volvo;" para que cambie solo los valores del automóvil dinámicamente a medida que cambia el estilo, como element.myAttributes.car = "ferrari" o con setAttributes ("myAttributes", car = "ferrari" ) . ¿Existe la posibilidad de hacer esto, o alguna alternativa similar, alguna idea?
var get_att = document.getElementById("demo").getAttribute("vehicles"); // how to get vehicles attributes and convert to object? const vehicles = {car:"mercedes", truck:"volvo"}; // const vehicles = get_att; // how to add the get_att variable here? vehicles.car = "ferrari"; const setVehicles = (Object.entries(vehicles).map(([k, v]) => `${k}: ${v}`).join("; ")); console.log(setVehicles); document.getElementById("demo").setAttribute("vehicles", setVehicles); <div id="demo" vehicles="car: mercedes; truck: volvo"></div>Los atributos HTML deben ser un valor de cadena que no puede analizar como un objeto. Para analizar los atributos, puede usar JSON.stringify() y JSON.parse() para configurar sus valores de atributo.
Ejemplo: ajuste:
const el = document.body el.setAttribute("my-attribute", JSON.stringify({car: "bmw", owner: "user1234"}))y analizar
JSON.parse(document.body.getAttribute('my-attribute'))Puede usar el conjunto de dataset para ese propósito. Aquí hay una pequeña demostración:
let div = document.querySelector("div"); Object.assign(div.dataset, { water: "Morshinska", juice: "Sandora" }); console.log(div.dataset.water); div.dataset.water = "Spa"; console.log(div.dataset.water); console.log(Object.entries(div.dataset) .map(([k, v]) => `${k}: ${v}`) .join("; ")); <div></div>Aunque esta no es la mejor práctica (debido a las limitaciones de los caracteres permitidos en este formato), aquí hay algunas funciones auxiliares para obtener y establecer propiedades individuales en la sintaxis de atributo que desea usar:
function getMyAttributes(elem) { const regex = /([^:;=]*):([^:;=]*)/g return Object.fromEntries(Array.from(elem.dataset.myattr?.matchAll(regex)??[], ([_, k, v]) => [k.trim(), v.trim()] )); } function setMyAttributes(elem, obj) { const regex = /[:;]/g; elem.dataset.myattr = Object.entries(obj).map(([k, v]) => { if (regex.test(k) || regex.test(v)) throw "Invalid character in key/value pair"; return `${k}: ${v};`; }).join(" "); } function setMyAttribute(elem, key, value) { setMyAttributes(elem, {...getMyAttributes(elem), ...{[key]: value}}); } function getMyAttribute(elem, key) { return getMyAttributes(elem)[key]; } // Demo let div = document.querySelector("div"); console.log(getMyAttribute(div, "water")); setMyAttribute(div, "water", "Spa"); console.log(getMyAttribute(div, "water")); console.log(div.dataset.myattr); <div data-myattr="water: Morshinska; juice: Sandora;"></div>