我将使用以 “data-mo-”
开头的各种数据属性名称。
假设我有这些元素:
<span data-mo-top-fade-duration="600">Title 1</span>
<span data-mo-bottom-fade-duration="600">Title 2</span>
<span data-mo-right-fade-duration="600">Title 3</span>
<span data-mo-left-fade-duration="600">Title 4</span>
我知道如何处理数据属性值以某个值开始的元素,但是如何处理数据属性names?
最佳答案
如果您只想查找给定节点是否具有以特定字符串开头的属性,那么一种方法如下:
// node: a single HTMLELement node,
// attr: the string to test against the attribute names:
function hasAttributeStartingWith(node, attr) {
// here we return the result, using Array.from() to turn
// the node-map of attributes into an Array, and then
// Array.prototype.filter() to remove any attributes that
// do not return a true/truthy result against the supplied
// assessment:
return Array.from(node.attributes).filter(function(attributeNode) {
// attributeNode: a reference to the current attribute-node
// of the array of attribute-nodes over which we're iterating.
// here we test to see if the nodeName (the attribute-name)
// of the attribute-node begins with the supplied string
// (held in the 'attr' variable):
return attributeNode.nodeName.indexOf(attr) === 0;
// if the filtered array is greater than zero then
// there are some attributes beginning with the
// supplied string:
}).length > 0;
}
// here we convert the nodeList returned from document.querySelectorAll()
// into an Array, using Array.from(), and iterate over those elements
// using Array.prototype.forEach():
Array.from(document.querySelectorAll('span')).forEach(function(span) {
// 'span': a reference to the current <span> element of the
// array of <span> elements over which we're iterating.
// using the function within the 'if' assessment, since it
// returns a Boolean true/false:
if (hasAttributeStartingWith(span, 'data-mo')) {
// using the Element.classList API to add
// the 'hasAttributeStartingWith' class to
// the current <span> if the function returns
// true:
span.classList.add('hasAttributeStartingWith');
}
});
function hasAttributeStartingWith(node, attr) {
return Array.from(node.attributes).filter(function(attributeNode) {
return attributeNode.nodeName.indexOf(attr) === 0;
}).length > 0;
}
Array.from(document.querySelectorAll('span')).forEach(function(span) {
if (hasAttributeStartingWith(span, 'data-mo')) {
span.classList.add('hasAttributeStartingWith');
}
});
.hasAttributeStartingWith {
display: inline-block;
font-size: 1.5em;
color: limegreen;
}
<span data-mo-top-fade-duration="600">Title 1</span>
<span data-mo-bottom-fade-duration="600">Title 2</span>
<span data-mo-right-fade-duration="600">Title 3</span>
<span data-mo-left-fade-duration="600">Title 4</span>
在上面所有元素都有一个以data-mo
开头的属性,为了更具体地展示它的工作原理,请尝试:
Array.from(document.querySelectorAll('span')).forEach(function(span) {
if (hasAttributeStartingWith(span, 'data-mo-b')) {
span.classList.add('hasAttributeStartingWith');
}
});
function hasAttributeStartingWith(node, attr) {
return Array.from(node.attributes).filter(function(attributeNode) {
return attributeNode.nodeName.indexOf(attr) === 0;
}).length > 0;
}
Array.from(document.querySelectorAll('span')).forEach(function(span) {
if (hasAttributeStartingWith(span, 'data-mo-b')) {
span.classList.add('hasAttributeStartingWith');
}
});
.hasAttributeStartingWith {
display: inline-block;
font-size: 1.5em;
color: limegreen;
}
<span data-mo-top-fade-duration="600">Title 1</span>
<span data-mo-bottom-fade-duration="600">Title 2</span>
<span data-mo-right-fade-duration="600">Title 3</span>
<span data-mo-left-fade-duration="600">Title 4</span>
这应该只匹配具有以字符串 data-mo-b
开头的属性的元素,仅第二个样式 <span>
元素。
引用资料:
关于javascript - 如何检查某个元素是否具有属性 "name"以某物开头,而不是 "value",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39207181/