innline 樣式 Attributes 具有諸如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>uj5u.com熱心網友回復：
您可以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>uj5u.com熱心網友回復：
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'))
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441724.html
標籤：javascript html dom 属性 风格