javascript - 通过添加边框和更改祖先显示样式来突出显示元素会更改页面布局

Question

我正在开发一个 Firefox 附加组件。我需要使用元素的 XPath 突出显示网页中的元素。我可以突出显示它。问题是元素以扭曲的方式出现。他们正在失去对齐。请专注于我如何向父元素添加显示属性，这在 elementHover 函数中对我造成了问题。

请在下面找到我试过的代码:

$(document).on('mouseenter', 'span[name=element-span]', function() {
    var xpath = $(this).next('input').val();
    $(this).closest("li").addClass("hovered");
    browser.tabs.executeScript(tempTabId, {
        code: "var css = '.highlistelement{" + "outline:2px solid #F70B0B !important;" + "border:2px solid red !important;" +
        "-webkit-box-shadow:0 0 0 2px #F70B0B !important, 0 0 0 2px #F70B0B !important;" + "}'," +
        "head = document.getElementsByTagName('head')[0],style = document.createElement('style');" + "style.type = 'text/css';" +
        "if (style.styleSheet){style.styleSheet.cssText = css;} " + "else {style.appendChild(document.createTextNode(css));" + "}head.appendChild(style);"
    });
    browser.tabs.executeScript(tempTabId, {
        code: "var css = '.block{" + "display:inline-block  !important;" +"};"
    });
    browser.tabs.executeScript(tempTabId, {
        code: "var css = '.displayBlock{" + "display:inline-block !important;" +"}',"+
        "head = document.getElementsByTagName('head')[0],style = document.createElement('style');" + "style.type = 'text/css';" +
        "if (style.styleSheet){style.styleSheet.cssText = css;} " + "else {style.appendChild(document.createTextNode(css));" + "}head.appendChild(style);"
    });
    browser.tabs.executeScript(tempTabId, {
        code: elementHover(xpath, "highlistelement","displayBlock","block")
    });
});

function elementHover(xpath, highlightClass,displayClass,blockClass) {
    var str = 'var path="' + xpath + '";' +
        'var iterator = document.evaluate(path, document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null); ' +
        'try {' +
        'var thisNode = iterator.iterateNext();' +
        'while (thisNode) {' +
        'thisNode.classList.add("' + highlightClass + '");' +
        'pnode=thisNode.parentNode;'+
        ' while(pnode){'+
        'if(pnode.style.getPropertyValue("display")==="none")'+
        '{'+
        'pnode.classList.add("'+blockClass+'");' +
        '}' +
        'else if(pnode.style.getPropertyValue("display")==="block"){' +
        'pnode.style.display="block"' +
         '}'+
        'else if(pnode.style.getPropertyValue("display")==="inline-block"){' +
        'pnode.style.display="inline-block"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="flex"){' +
        'pnode.style.display="flex"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="inline"){' +
        'pnode.style.display="inline"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="inline-flex"){' +
        'pnode.style.display="inline-flex"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="inline-table"){' +
        'pnode.style.display="inline-table"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="list-item"){' +
        'pnode.style.display="list-item"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="run-in"){' +
        'pnode.style.display="run-in"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="table"){' +
        'pnode.style.display="table"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="table-caption"){' +
        'pnode.style.display="table-caption"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="table-column-group"){' +
        'pnode.style.display="table-column-group"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="table-header-group"){' +
        'pnode.style.display="table-header-group"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="table-footer-group"){' +
        'pnode.style.display="table-header-group"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="table-row-group"){' +
        'pnode.style.display="table-row-group"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="table-cell"){' +
        'pnode.style.display="table-cell"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="table-column"){' +
        'pnode.style.display="table-cell"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="table-row"){' +
        'pnode.style.display="table-row"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="initial"){' +
        'pnode.style.display="initial"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="inherit"){' +
        'pnode.style.display="inherit"' +
        '}'+
        'else if(pnode.style.getPropertyValue("display")==="")' +
        '{'+
        'pnode.classList.add("'+displayClass+'");' +
        'var evObj = document.createEvent("Events");'+
        ' evObj.initEvent("mouseover", true, false);'+
        'pnode.dispatchEvent(evObj);'+
        '}else  if(pnode.style.getPropertyValue("visibility")==="hidden")'+
        '{'+
        'pnode.style.visibility = "visible";' +
        '}' +
        'thisNode.scrollIntoView(true);' +
        'pnode=pnode.parentNode;'+
        '}' +
        'thisNode = iterator.iterateNext();' +
        '}' +
        '} catch (e) {' +
        '}';
    return str;
}

请在下面找到示例图片以了解问题:

请观察图像。当我突出显示“Gmail”文本时，剩余的两个链接将移至下一行。

Answer 1

您应用的样式会改变布局。您更改您感兴趣的元素框的大小，并更改 display 的值。其所有 parent 的风格。

添加边框会改变显示元素的大小

具体来说，您要添加边框:border:2px solid red !important; .

在应用你的样式之前，盒子模型是一个 34×24 的盒子:

添加边框后，框为 38×28(每边多 2 个像素)。

如果您不想更改布局，请确保您添加的样式不会更改显示元素的框的大小。在这种情况下，因为您还应用了样式 outline:2px solid #F70B0B !important; , 你可以通过不使用 border:2px solid red !important; 来获得非常相似的效果风格。

下面是一个简单的例子，展示了添加边框如何改变元素的大小，而轮廓则不会。悬停时添加边框或轮廓。

.borderOnHover:hover {
  border:2px solid red !important;
}
.outlineOnHover:hover {
  outline:2px solid #F70B0B !important;
}

<span class="borderOnHover">Border changes the size</span>
<span>Other Text</span>
<br/>
<br/>
<span class="outlineOnHover">Outline does not change the size</span>
<span>Other Text</span>
<br/>

改变display所有祖先的属性(property)

您的代码还通过更改 display 运行元素所有祖先的属性。每个更改为什么取决于它以前的值是什么。您可以通过更改 display 来做到这一点属性，或添加 displayBlock类(class)。您还添加了 block类，但您永远不会定义 block类，所以它没有效果。为了不影响布局，您不需要更改 display元素或其任何祖先的属性。

你的 block永远不会创建 CSS 类。您将文本分配给变量 css , 但随后变量的值立即更改为您的 displayBlock 的文本类，然后添加为 <style> .