比较样式属性顺序无关的两个HTML元素 [英] Compare two HTML elements where order of style properties is irrelevant

问题描述

这个问题几乎相同，但在一个关键方面和最终没有帮助:样式属性的顺序.

This question is nearly identical, but differs in one crucial aspect and does not help ultimately: the sequence of style properties.

也就是说，具有相同样式属性(但顺序不同)的两个元素应视为等效.

That is, two elements with the same style properties -- but in different orders -- should be considered equivalent.

平等还应该考虑后代，并递归地应用此逻辑.也就是说，如果唯一的区别是样式属性的顺序，则具有相同后代的两个元素是相等的. (这以前是对IsEqualNode的过时理解所隐含的，IsEqualNode认为孩子是旧规范的孩子，而不再是新规范的孩子.)

Equality should also consider descendants, and apply this logic recursively. That is, two elements with the same descendants are equal if the only differences are the order of style properties. (This was implied previously under an outdated understanding of IsEqualNode, which considered children under an old spec but no longer does under the new spec.)

但是，评分最高的答案将两个这样的元素视为不同，如下所示:

However, the highest-rated answer treats two such elements as different, as illustrated here:

<div style="color: red; font-size: 28px">TEST A</div>
<div style="font-size: 28px; color: red">TEST A</div>

if ($("div")[0].isEqualNode($("div")[1])) {
  alert("Same");
} else {
  alert("Different");
}

如果两个HTML元素之间唯一的区别是样式属性的顺序，您怎么能将它们识别为相等?

How could you recognize two HTML elements as equal if the only difference between them is the order of style properties?

推荐答案

规范 ，如果应用于元素:

Node.isEqualNode() does compare children. See the spec for the complete algorithm, if applied to elements:

如果满足以下所有条件，则节点A等于节点B:

A node A equals a node B if all of the following conditions are true:

• A和B的nodeType属性值相同.
• 以下内容也相等...:
  • [元素:]它的名称空间，名称空间前缀，本地名称及其属性列表中的属性数量.
  • A and B's nodeType attribute value is identical.
  • The following are also equal...:
    • [Element:] Its namespace, namespace prefix, local name, and its number of attributes in its attribute list.

    问题仍然是style属性值的文本比较，并且相同的参数(功能上相同，但文本上不同)可以应用于class属性.

    The problem remains the text comparison of the style attribute values, and the same argument - functionally the same, but textually different - can be applied to the class atribute.

    一种解决方案是生成一个克隆，该克隆的样式属性和类名称具有定义的(字母顺序)顺序.

    A solution is to produce a clone that has a defined (alphabetical) order for the style properties and class names.

    Element.style返回带有字符串键和数字键的对象.第一个是包含现有 all CSS属性的列表，无论它们是否真的在style属性中设置.那是一个很长的列表，大多数条目都是空字符串.

    Element.style returns an object both with string keys and numeric keys. The first are a list containing all CSS properties in existence, whether they are really set in the style attribute or not. That is a long list, and most entries are the empty string.

    这是数字键的作用所在:该对象包含类似数组的条目，列出了所有实际设置的属性名称.用Array.from()将它们转换为真实数组可以仅获取相关部分并对它们进行排序.

    That is where the numeric keys help: the object contains array-like entries listing all the property names that are actually set. Converting them with Array.from() to a real array makes it possible to only get the relevant parts and sort them.

    Element.classList是一个类似数组的列表.

    Element.classList is an equally Array-like list.

    这两个属性都被视为只读属性，因此要回写，请使用基本方法写入命名属性.

    Both properties are considered read-only, so to write back, use the basic method to write to a named attribute.

    $.fn.normalizeTree = function () {
        return this.each(function () {
            $(this).add("*", this).each(function () {
                const sortedClass = Array.from(this.classList)
                   .sort()
                   .join(' ');
                $(this).attr('class', sortedClass);
    
                const sortedStyle = Array.from(this.style)
                   .sort()
                   .map(prop => `${prop}: ${this.style[prop]};`)
                   .join();
                $(this).attr('style', sortedStyle);
            });
        });
    }
    
    const rawNodes = $(".comparable");
    
    if (rawNodes[0].isEqualNode(rawNodes[1])) {
      $("#result1").text("equal")
    }
    
    const normalNodes = rawNodes.clone().normalizeTree();
    
    if (normalNodes[0].isEqualNode(normalNodes[1])) {
      $("#result2").text("equal")
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <div class="comparable">
      <p class="one two"><span style="color:rgb(0, 0, 0);font-family:sans-serif;font-size:15px">A text.</span></p>
    </div>
    <div class="comparable">
      <p class="two one"><span style="font-size:15px;font-family: sans-serif;color:rgb(0, 0, 0);">A text.</span></p>
    </div>
    
    <p>These are <span id="result1">not equal</span> if raw.</p>
    <p>These are <span id="result2">not equal</span> if normalized.</p>

    这篇关于比较样式属性顺序无关的两个HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！