javascript - getcomputedstyle 仅更改默认值

Question

我目前拥有的代码获得了整个 CSS，甚至是默认的。我想要的是只更改默认的 CSS。

function baba() {
  addEventListener("mouseover", function() {
    var elem = document.getElementById("ex");
    cssObj = window.getComputedStyle(elem, null)
    var txt = "";

    for (i = 0; i < cssObj.length; i++) {
      cssObjProp = cssObj.item(i)
      txt += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";

      document.getElementById("empty").innerHTML = txt;
    }
  })
}

<p id="ex" onclick="baba()">Hello World</p>
<h1>Hello World</h1>
<p id="empty"></p>

Answer 1

好的，这就是我将如何处理它。注意:我只是在 5 分钟内将其在控制台中猛烈抨击；我确信有更有效的方法来处理它，但是对于 PoC，这应该会让你继续前进。

需求分析

真的(无论如何，除非有更具体的边缘案例应用程序)，您要问的是“元素 <XXX> 的当前计算样式与相同上下文中相同类型的普通对象有何不同？”问它与“默认”有何不同是荒谬的，因为“默认”，perforce，将受到所述上下文的影响(不同意？等等；我会解释)。

因此，我们真正需要检查的是 <XXX>缺少应用于目标对象的效果(其 DOM 位置、类、id、属性、前辈等的后果)。好消息是:我们完全可以伪造它!一探究竟:

设置

首先，让我们捕获我们的对象。我知道，这将作为一个函数更好地执行，但为了说明目的，请在此处与我一起工作。让我们选择一个您可以立即看到结果的对象。让我们看看……这个页面顶部的搜索栏怎么样？按 f12 弹出你的控制台，你会看到它的名字是 'q'。那会奏效的。

// Get the StackOverflow Search field from the top of this page.
var targetDOMElement = document.querySelector('[name="q"]');
// Now, let's get its current style snapshot.
var targetObjsStyles = window.getComputedStyle(targetDOMElement);
// ... and vomit it out to our console, just so we know what we're dealing with.
console.log('ORIGINAL SET (' + Object.keys(targetObjsStyles).length + ' rules):',targetObjsStyles);

首都!现在我们有了我们的源对象(我们的“ <XXX>”，如果你愿意的话)。

控制

接下来，我们需要一些东西来比较它。现在，作为一个听话的小男孩，我是正统科学家，在我看来，这是一种控制。幸运的是，我们对源对象了解很多，所以让我们制造一个:

// Create a new element of the same type (e.g. tagName) as our target
var tempCopyOfTarget = document.createElement(targetDOMElement.tagName);
// Insert it into the context AT THE BEGINNING of the page. Both bits here are important:
// if we create it within a documentFragment (try it) literally every property will 
// be flagged as unique. I suspect this has to do with the client's default 
// renderer, vs. the purity of a abstracted prototype, but I won't lie: I'm guessing.
// It MUST be at the start of the body to avoid silliness like
// body > .first-element ~ xxx { display:none; }
// CSS still won't let us target predecessors/ancestors, alas.
document.body.insertAdjacentElement('afterBegin', tempCopyOfTarget);
// Now  our new object shares our target's context, get ITS snapshot.
var basicElementsCSS = window.getComputedStyle(tempCopyOfTarget);
console.log('BASELINE (DUMMY OBJECT) SET (' + Object.keys(basicElementsCSS).length + ' rules):',basicElementsCSS);

繁重的工作

虽然我确信大多数人都知道我现在要去哪里，但让我们结束她。给定一个可测试的数量和一个控制，检查增量。

// Create an empty object to store any changes in.
var cleanSetOfStyles = {};
// Objectify our target's style snapshot, and iterate.
Object.entries(targetObjsStyles).forEach(p=>{
    // If a key-value pair exists that matches our control, ignore it. Otherwise,
    // tack it onto our clean object for later perusal.
    if(basicElementsCSS[p[0]] !== p[1]){ 
        cleanSetOfStyles[p[0]] = p[1];
    }
});

惊人的!干得好!

结论

现在，假设我的假设是正确的，我们应该在干净的对象中看到一组属性及其对应的值。这个列表的长度应该是非零的，并且与上面的原始集合中包含的计数不同(如果你更仔细地注意到，它们是相同的，因为浏览器将所有可能的样式值分配给请求 getComputedStyles 集合时的对象。

// Display our deltas
console.log('CLEAN SET (' + Object.keys(cleanSetOfStyles).length + ' rules):',cleanSetOfStyles);
// Oh, and always remember to clean up after you make a mess in the lab.
tempCopyOfTarget.remove()

这是什么!？胜利!至少在我的环境中(必须考虑到我的浏览器品牌、版本、事件插件、支持的功能、操作系统等；您的里程可能会有所不同)，我计算出 116 条规则仍然存在并正在作用于我们的目标对象。这些规则与我们在浏览器看到它的皮秒内召唤出来的普通的第一行代码对象不同。

注意事项

总有一个陷阱，不是吗？
这不是一个万无一失的系统。我可以想到六种方法，这将在我的脑海中失败( :empty 修饰符，取决于您所处的范围... [name="q"] ~ [name="q"] 规则，我们的虚拟对象的插入现在适用于我们的目标... :first-of-type 不再适用...各种“哎呀”)。但是，我已经准备好断言所有我能想到的都是边缘情况，并且如果考虑得当，它们本身都是可以管理的。

TLDR

这是整个代码，如果您愿意，可以直接复制+粘贴到控制台中，并且没有注释:

var targetDOMElement = document.querySelector('[name="q"]');
var targetObjsStyles = window.getComputedStyle(targetDOMElement);
console.log('ORIGINAL SET (' + Object.keys(targetObjsStyles).length + ' rules):',targetObjsStyles)

var tempCopyOfTarget = document.createElement(targetDOMElement.tagName);
document.body.insertAdjacentElement('afterBegin', tempCopyOfTarget);

var basicElementsCSS = window.getComputedStyle(tempCopyOfTarget);
console.log('BASELINE (DUMMY OBJECT) SET (' + Object.keys(basicElementsCSS).length + ' rules):',basicElementsCSS)

var cleanSetOfStyles = {};
Object.entries(targetObjsStyles).forEach(p=>{
    if(basicElementsCSS[p[0]] !== p[1]){ 
        cleanSetOfStyles[p[0]] = p[1];
    }

});
console.log('CLEAN SET (' + Object.keys(cleanSetOfStyles).length + ' rules):',cleanSetOfStyles);

tempCopyOfTarget.remove()

最后一点:我知道这个问题已经有几个月的历史了，但除了“不!你完蛋了!”之外，没有人真正回答过这个问题。
如果机会不大，@angels7 仍然需要修复，来吧。否则，“嗨，你们这些遥远 future 的人!”