debugging 突出显示HTML元素的纯JavaScript代码

ovfsdjhp  于 2023-06-23  发布在  Java
关注(0)|答案(7)|浏览(104)

为了调试一些JavaScript代码,我正在寻找可以突出显示divspan的JavaScript代码(最好是js,没有库和依赖项)(可能是通过在它上面放置一个相同大小和形状的div或span,带有明亮的颜色和一些透明度)。
我很确定这是可以的,但我不知道如何开始。

澄清

我需要在元素顶部放置一个半透明的div。修改背景或添加边框不会有帮助,因为我的元素本身就有背景和边框。

f0ofjuux

f0ofjuux1#

element.style.backgroundColor = "#FDFF47";

FDFF47是一个很好的黄色阴影,似乎非常适合突出显示。

*******************如果你想恢复以前的背景色,只需要存储element.style.backgroundColor并在以后访问它。

unhi4e5o

unhi4e5o2#

如果你在支持CSS outline的浏览器中进行调试,一个简单的解决方案是:

myElement.style.outline = '#f00 solid 2px';
pcrecxhr

pcrecxhr3#

如果出于某种原因,你需要使用JavaScript这里是函数,临时高亮元素的背景

function highlight(element) {
    let defaultBG = element.style.backgroundColor;
    let defaultTransition = element.style.transition;

    element.style.transition = "background 1s";
    element.style.backgroundColor = "#FDFF47";

    setTimeout(function()
    {
        element.style.backgroundColor = defaultBG;
        setTimeout(function() {
            element.style.transition = defaultTransition;
        }, 1000);
    }, 1000);
}
zqdjd7g9

zqdjd7g94#

老帖子,但值得添加,因为它显示在搜索主题。实现高亮效果的简单方法是:

myElement.style.filter = "brightness(125%)";
cclgggtu

cclgggtu5#

function highlight(element) {
    var div = highlight.div; // only highlight one element per page

    if(element === null) { // remove highlight via `highlight(null)`
        if(div.parentNode) div.parentNode.removeChild(div);
        return;
    }

    var width = element.offsetWidth,
        height = element.offsetHeight;

    div.style.width = width + 'px';
    div.style.height = height + 'px';

    element.offsetParent.appendChild(div);

    div.style.left = element.offsetLeft + (width - div.offsetWidth) / 2 + 'px';
    div.style.top = element.offsetTop + (height - div.offsetHeight) / 2 + 'px';
}

highlight.div = document.createElement('div');

// set highlight styles
with(highlight.div.style) {
    position = 'absolute';
    border = '5px solid red';
}
2izufjch

2izufjch6#

你用Firebug吗?它使识别DOM元素变得非常简单,并且在您浏览DOM时会在页面中突出显示它们。

o4tp2gmn

o4tp2gmn7#

下面是一个组合了前两个答案的函数:

function highlight(element){
    let defaultBG = element.style.backgroundColor;
    let defaultOutline = element.style.outline;

    element.style.backgroundColor = "#FDFF47";
    element.style.outline = '#f00 solid 4px';

    setTimeout(function()
    {
        element.style.backgroundColor = defaultBG;
        element.style.outline = defaultOutline;

    }, 2000);
}

相关问题