自定义属性值 Javascript

Question

内联样式属性的值例如 style = "color: green; background: red;"。如果我只想动态更改使用 Javascript 属性样式更改的背景，我可以这样做：

element.style.background = "blue"

如何创建“自定义”属性，以便属性中的值可以动态更改？

例如：

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

这样我就可以随着样式的变化而动态地更改汽车值，作为

element.myAttributes.car = "ferrari"

或 是否

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

有可能做到这一点，或者一些类似的替代方案，一些想法？

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>

Answer 1

您可以使用数据集 为此目的。这是一个小演示：

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>

更接近您的格式的解决方案

虽然这不是最佳实践（由于此格式中允许的字符的限制），但以下是一些辅助函数，可用于获取和设置您要使用的属性语法中的各个属性：

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>

Answer 2

HTML 属性必须是字符串值，您无法像对象一样解析它。对于解析属性，您可以使用 JSON.stringify() 和 JSON.parse() 来设置属性值。

例子：
设置：

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

并解析

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