我試圖做一個函式,為你提供你想要的元素的選定CSS屬性。但如果在控制臺中使用,它就會非常滯后,因為它需要獲取并匹配所有的CSS屬性。
function styleOf(elementUseSelectors, propertiesToCheck, tellInConsole) {
var element = elementUseSelectors;
var Arguments = propertiesToCheck;
var calculatedProperties = [];
var matchedProperties = [];
if (tellInConsole !== undefined && tellInConsole == true) {
console.warn("運行styleOf() 請不要做其他計算 此函式禁用控制臺。" )
}
for (var i = 0; i < Object. keys(getComputedStyle(element)).length; i ) {
var value = getComputedStyle(element).getPropertyValue(Object. entries(getComputedStyle(element))[i][0] 。 replace(/([A-Z])/g, ' $1'/span>).trim()。 replaceAll(" ", "-").toLowerCase())。)
if (value !== "") {
calculatedProperties.push(Object. entries(getComputedStyle(element))[i][0] 。 replace(/([A-Z])/g, ' $1'/span>).trim()。 replaceAll(" ", "-").toLowerCase() " 。" 值)。)
}
}
for (var i = 0; i < calculatedProperties.length; i ) {
for (var a = 0; a < Arguments.length; a ) {
if (calculatedProperties[i].includes(Arguments[a]) {
window.splitted = calculatedProperties[i].split(")。
window.joinThis=[]。
for (var k = 0; k < splitted.indexOf(" :" ); k ) {
joinThis.push(splitted[k])。
};
if (joinThis.join("") == Arguments[a] ) {
matchedProperties.push(calculatedProperties[i])。
}
}
}
}
if (tellInConsole !== undefined && tellInConsole == true) {
console.warn("StyleOf() Calculations completed You Can Now Use Console." )
}
return matchedProperties
}
uj5u.com熱心網友回復:
TreeWalker物件被設計用來快速決議檔案中的DOM結點。如果你在MDN Web Docs中對上面給出的例子進行擴展,你可以為一個給定的節點輸出計算的CSS屬性。
該方法的第一個屬性是你想要遍歷的節點--在本例中是document.body:
var treeWalker =document.createTreeWalker(
document.body。
NodeFilter.SHOW_ELEMENT。
{ acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; }. },
false.
);
var nodeList = [] 。
var currentNode = treeWalker.currentNode;
while(currentNode) {
nodeList.push(currentNode)。
const style = getComputedStyle(currentNode)
console.log(style)。
currentNode = treeWalker.nextNode()。
console.log("移動到下一個節點...")。
}
uj5u.com熱心網友回復:
Welp @kaiido 回答了這個問題。
function styleOf(element, properties){
const computed = getComputedStyle(element)。
return properties.map( key => key " 。" computed[ key ] )}。
var style = styleOf(document. getElementsByTagName("body")[0], ["高度", "寬度"。"背景色", "字體大小", "顏色", "字體"])。
console.log(style)。
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/309273.html
標籤:
上一篇:為什么這個遞回會回傳0?
