mã javascript đơn giản để đánh dấu phần tử html

Question

để gỡ lỗi một số mã javascript, tôi đang tìm mã javascript (tốt hơn là chỉ js, không có thư viện và phụ thuộc) có thể làm nổi bật div hoặc span (có thể bằng cách đặt trên đó một div hoặc span có cùng kích thước và hình dạng với màu sáng và độ trong suốt).

Tôi khá chắc chắn rằng nó có thể được thực hiện, nhưng tôi không biết làm thế nào để bắt đầu.

Làm rõ

tôi cần phải đặt một div bán trong suốt trên đầu trang của các yếu tố của tôi. Sửa đổi nền hoặc thêm đường viền sẽ không giúp ích vì các phần tử của tôi có hình nền và đường viền.

Answer 1

element.style.backgroundColor = "#FDFF47"; 

# FDFF47 là một màu vàng đẹp có vẻ hoàn hảo để làm nổi bật.

Chỉnh sửa để làm rõ: Bạn đang quá phức tạp. Nếu bạn muốn khôi phục màu nền trước đó, chỉ cần lưu trữ element.style.backgroundColor và truy cập sau này.

Answer 2

Nếu bạn đang gỡ lỗi trong trình duyệt hỗ trợ CSS outline, một giải pháp đơn giản là thế này:

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

Answer 3

Bạn có sử dụng Firebug? Nó làm cho nó rất đơn giản để xác định các yếu tố dom và sẽ làm nổi bật chúng trong trang khi bạn đi bộ qua dom.

Answer 4

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'; 
}