为了调试一些JavaScript代码,我正在寻找可以突出显示div或span的JavaScript代码(最好是js,没有库和依赖项)(可能是通过在它上面放置一个相同大小和形状的div或span,带有明亮的颜色和一些透明度)。我很确定这是可以的,但我不知道如何开始。
div
span
澄清
我需要在元素顶部放置一个半透明的div。修改背景或添加边框不会有帮助,因为我的元素本身就有背景和边框。
f0ofjuux1#
element.style.backgroundColor = "#FDFF47";
*******************如果你想恢复以前的背景色,只需要存储element.style.backgroundColor并在以后访问它。
element.style.backgroundColor
unhi4e5o2#
如果你在支持CSS outline的浏览器中进行调试,一个简单的解决方案是:
outline
myElement.style.outline = '#f00 solid 2px';
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); }
zqdjd7g94#
老帖子,但值得添加,因为它显示在搜索主题。实现高亮效果的简单方法是:
myElement.style.filter = "brightness(125%)";
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'; }
2izufjch6#
你用Firebug吗?它使识别DOM元素变得非常简单,并且在您浏览DOM时会在页面中突出显示它们。
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); }
7条答案
按热度按时间f0ofjuux1#
FDFF47是一个很好的黄色阴影,似乎非常适合突出显示。
*******************如果你想恢复以前的背景色,只需要存储
element.style.backgroundColor
并在以后访问它。unhi4e5o2#
如果你在支持CSS
outline
的浏览器中进行调试,一个简单的解决方案是:pcrecxhr3#
如果出于某种原因,你需要使用JavaScript这里是函数,临时高亮元素的背景
zqdjd7g94#
老帖子,但值得添加,因为它显示在搜索主题。实现高亮效果的简单方法是:
cclgggtu5#
2izufjch6#
你用Firebug吗?它使识别DOM元素变得非常简单,并且在您浏览DOM时会在页面中突出显示它们。
o4tp2gmn7#
下面是一个组合了前两个答案的函数: