Custom attributes values Javascript

Question

The inline style attributes has values such as style = "color: green; background: red;". If I want to dynamically change only the background I change with the Javascript attribute style, I do it with:

element.style.background = "blue"

How to create a "custom" attribute so that the values within an attribute can change dynamically?

For example:

myAttributes = "car: mercedes; truck: volvo;"

so that I change only car values dynamically as style changes, as an

element.myAttributes.car = "ferrari"

or with

setAttributes ("myAttributes", car = "ferrari" )

Is there a possibility to do this, or some similar alternative, some 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>

Does this answer your question? Custom attributes - Yea or nay? — Archit Gargi
– Archit Gargi, Commented Mar 7, 2022 at 13:03
element.setAttribute('attrName', 'attrVal') ... (and maybe, use data-... attribute name ...) — Vovan_Super
– Vovan_Super, Commented Mar 7, 2022 at 13:04
How do I dynamically change only car value with javascript in an attribute, without writing truck? How use data-? — maja
– maja, Commented Mar 7, 2022 at 13:29

trincot · Accepted Answer · 2022-03-07 16:40:51Z

2

You can use dataset for that purpose. Here is a small demo:

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>

Solution more close to your format

Although this is not best practice (due to the limitations on the allowed characters in this format), here are some helper functions to get and set individual properties in the attribute syntax you want to use:

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>

edited Mar 7, 2022 at 16:40

answered Mar 7, 2022 at 13:37

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

maja Over a year ago

In the div I get two separate data-water = "Spa" and data-juice = "Sandora", and I need data = "whater: Spa; juice: Sandora;"

trincot Over a year ago

You can get that with a simple function.

maja Over a year ago

I just read about creating object, can this help: link

trincot Over a year ago

Objects are the basic stuff in JavaScript. I don't understand why you link to that. dataset is such an object. See addition to answer to see how you can produce such string representation.

maja Over a year ago

Testing: I'm trying to get attributes of the div, modify it and put it back in this form <div myAttributes = "car: mercedes; truck: volvo;"> -> just change div.dataset.car = "ferrari" Just like we change the background or color in style.

|

vitaliyirtlach · Accepted Answer · 2022-03-07 13:11:32Z

2

HTML Attributes must be a string value you can't parse this like a object. For parse attributes you can you JSON.stringify() and JSON.parse() for setting you attribute values.

Example: setting:

const el = document.body 
el.setAttribute("my-attribute", JSON.stringify({car: "bmw", owner: "user1234"}))

and parse

    JSON.parse(document.body.getAttribute('my-attribute'))

answered Mar 7, 2022 at 13:11

vitaliyirtlach

3333 silver badges10 bronze badges

2 Comments

maja Over a year ago

after setAttribute how to dynamically change car or owner value separately, without rewriting owner, element.myAttributes.car = "ferrari"?

maja Over a year ago

I added the code in question. I tried to get Attributes and switch to JSON.parse, but I don't get the result. How do I do this?

Collectives™ on Stack Overflow

Custom attributes values Javascript

2 Answers 2

Solution more close to your format

8 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Solution more close to your format

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related