根據頁面在頁面上的位置來操作元素

Question

因此，在我的代碼中，當您單擊某個元素時，它會發現該元素的路徑併發出警報。然後，我想要「保存」元素的路徑，然後單擊該按鈕時，找到它併爲其添加紅色邊框。

function nodelistToArray(nodelist) { 
 
    return Array.prototype.slice.call(nodelist); 
 
} 
 

 
function traverse(target, chain) { 
 
    if (chain === void 0) { 
 
    chain = []; 
 
    } 
 
    var index = nodelistToArray(target.parentNode.children).filter(function(a) { 
 
    return a.nodeName == target.nodeName; 
 
    }).indexOf(target); 
 
    chain.push({ 
 
    element: target, 
 
    index: index 
 
    }); 
 
    if (target.nodeName.toLowerCase() == "html") { 
 
    return chain.reverse(); 
 
    } else { 
 
    return traverse(target.parentNode, chain); 
 
    } 
 
} 
 
    
 
document.addEventListener("click", eOnClick, true); 
 

 
function eOnClick(evt) { 
 
    var chain = traverse(evt.target); 
 
    alert(chain.map(function(elm) { 
 
    return elm.element.nodeName + ' [' + (elm.index).toString() + ']'; 
 
    }).join(' > ')); 
 
}

<div> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    </ul> 
 
    <ol> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    </ol> 
 
</div> 
 
<div> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    </ul> 
 
    <ol> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    </ol> 
 
</div> 
 

 
<p>1. Click one of the elements above 
 
<br>2. An alert will tell you where this element is located 
 
<br>3. Click the button below to add a red border to the element 
 

 
<p><button>Click Me</button>

Answer 1

不要認爲需要找出元素的路徑。你可以得到元素這樣 並應用CSS。

document.addEventListener('click', function(e) { 
    e = e || window.event; 
    var target = e.target || e.srcElement; 
     target.setAttribute('style','border:10px solid red'); 
}, false);