我正在创建一个存储各种元素及其 CSS 属性的对象。
我现在拥有的代码:
// My object
var cssStorage = {};
function store(element, cssProperty, value) {
// Initialize the (sub-)objects if they don't exist
cssStorage[element.id] = cssStorage[element] || {};
cssStorage[element.id][cssProperty] = cssStorage[element][cssProperty] || {};
// Set the cssProperty to equal the value
cssStorage[element.id][cssProperty] = value;
};
示例:
// My element
var box = document.getElementById("box");
// Let's call the function twice to save to properties
store(box, "display", "block");
store(box, "height", "74px");
现在我的对象填充如下:
cssStorage = {
box: { // <- box is the id of the HTML element <div id = "box"></div>
// The property-value pairs
display: "block",
height: "74px"
}
};
现在,如果我在控制台中输入代码:
return cssStorage.box.display; // Returns "block"
<小时/>
正如您在我发布的第一 block 代码中看到的,我使用 element.id
作为元素的唯一标识符
,能够如上所示使用它。
我的问题是我的脚本对 element.id
的依赖性。我的 DOM 中的某些元素没有 id
,因此该函数对于这些元素没有用处。
本质上,我想要实现的是当我的元素没有ID
时调用函数store
如下:
// Some ways to get an element
var box = document.getElementsByClassName("boxes")[0];
var box = document.getElementsByTagName("div")[0];
var box = document.getElementsByName("jack")[0];
// It'll show an error, as the function uses 'element.id' and my element doesn't have one
store(box, "display", "block");
DOM 中的每个节点是否都有唯一的标识符?
我可以用作名称的东西:
cssStorage = {
[THE NAME]: {}
};
如果没有,如何为我的元素创建唯一标识符,以便我可以使用上面所示的函数,而不需要我的元素可能没有的 id、类或其他属性?
最佳答案
您可以轻松地为任何还没有唯一标识符的元素创建一个唯一标识符:
var customIDprefix = "__myCustomPrefix__";
var customIDcntr = 0;
function getNextID() {
return customIDprefix + customIDCntr++;
}
然后您可以确保您使用的任何元素都有唯一的 ID:
function checkID(elem) {
if (!elem.id) {
elem.id = getNextID();
}
}
<小时/>
如果您使用 ES6,您也可以只使用 WeakMap
或 Map
对象作为 CSSStorage 机制,让 DOM 元素本身成为关键,这样您就不需要不必创建字符串 key 。
在这种情况下,您只需这样做:
var cssStorage = new Map();
cssStorage[elem] = { // <- elem (your DOM element itself) becomes your key into the cssStorage
// The property-value pairs
display: "block",
height: "74px"
}
关于javascript - 为 DOM 元素创建唯一标识符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38557472/