自定义属性值 Javascript

Question

innline style 属性有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

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'))

Answer 2

您可以使用 dataset 来达到这个目的。这是一个小演示：

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>

自定义属性值 Javascript

Custom Attributes values Javascript

html

javascript

attributes

dom

styles

更接近您格式的解决方案