js로 html 소스 코드와 관련된 선택된 html 요소 오프셋 가져 오기

html 소스 코드에서 선택된 html 요소의 오프셋을 가져올 수 있습니까? 예를 들어js로 html 소스 코드와 관련된 선택된 html 요소 오프셋 가져 오기

<html> <body> <a href="http://google.com">google</a> </body> <html>

사용자가 구글의 텍스트를 선택한다면, 나는이 40를 얻고 싶은 것은 소스의 선두로부터의 오프셋 (offset)된다.

Range 개체로 시도했지만이 개체와 관련된 유용한 정보를 찾을 수 없습니다.

감사합니다.

출처

2012-03-05 adi ohaion

'html 소스 코드에서 무엇을 의미합니까? ' –

왜이 번호가 필요합니까? –

<html> 
<head> 
<script> 
function srcOffset(ele) 
{ 
    alert(document.getElementsByTagName('html')[0].innerHTML.indexOf(ele.id) + ele.id.length + 2); 
    return false; 
} 
</script> 
</head> 
<body> 
<a href="http://www.google.com/" onclick="return srcOffset(this)" id="myLink">Google</a> 
</body> 
</html>

출처

2012-03-05 15:21:11 MarkFisher

답장을 보내 주셔서 감사합니다.하지만 요소에 id attr이 없으면 어떻게 될까요? –

앵커에 관한 어떤 것이 고유해야합니다. 그렇지 않으면 소스에서 JS라고하는 링크를 알 수 없습니다. href 속성은 페이지에서 고유 한 것이고 그 뒤에 닫는 괄호를 검색하는 경우 사용할 수 있습니다. 독창성이 없다면, 당신은 뼈 아프다. – MarkFisher

OK anchor 노드에 id attr을 주입하려고하므로 원하는 요소에 대한 고유성이 확보됩니다. 그 트릭을 할 것이기를 바랍니다. 다시 한 번 감사드립니다. –

-1

이 당신이 jQuery를

이 예제의

$(document).ready(function() { 
    $("a").click(function() { 
    var offset = $(this).offset(); 
    alert(offset.left); 
     alert(offset.top); 
}); 

}); 

<html> <body> 
    <a href="http://google.com" class="first">google</a> 
    <a href="http://abc.com" class="second">abc</a> 
    <a href="http://xyz.com" class="third">xyz</a> 
</body> <html> 

a.first { position:absolute; 
    left:20px; top:35px; } 
a.second{ position:absolute; 
      left:100px; top:35px; } 
a.third{ position:absolute; 
      left:220px; top:35px; }

데모를 사용하여 오프셋 얻을 방법은 : http://jsfiddle.net/5YFxH/

출처

2012-03-05 15:12:50

빠른 답장을 보내 주셔서 감사합니다. 그러나 이것은 제가 의미했던 것이 아닙니다. 나는 요소 배치 방법을 안다. 하지만 html 코드 자체에서 오프셋이 필요합니다. html 소스 코드의 시작부터 문자 수. 미안하지만 분명하지 않다면. 이것에 대한 어떤 생각? –

당신은 정말 현명한 방법으로이 작업을 수행 할 수 없습니다. 근본적인 문제는 브라우저가 서버에서 보낸 원본 HTML을 되돌릴 방법이 없다는 것입니다. innerHTML은 원래 HTML의 스 니펫이 아닌 원본 HTML에서 파싱 된 브라우저의 DOM 표현이기 때문에 어떤면에서는 종종 다릅니다.

모든 주요 브라우저에서 사용자 선택에 대한 정보를 검색 할 수 있지만이 정보는 서버에서 보낸 원본 HTML이 들어있는 문자열을 기준으로 한 오프셋이 아니라 브라우저의 DOM 노드로 표현됩니다.

그런 경우라면, 최선의 선택은 Ajax를 통해 HTML 소스를 다시 검색하고 브라우저 DOM을 HTML 문자열과 일 치하는 복잡한 HTML 구문 분석을 수행하는 것입니다. 이는 사소한 작업입니다. HTML 소스를 다시 가져올 때까지 페이지에서 실행중인 스크립트가 DOM을 수정 한 경우에도 불가능할 수 있습니다. 나는 당신이 원하는 것을 성취 할 수있는 또 다른 방법을 찾고자합니다.

출처

2012-03-05 16:18:27

내가 원하는 것을 성취 할 수있는 또 다른 방법을 찾았습니다. 답장 해주셔서 매우 감사합니다! –

js로 html 소스 코드와 관련된 선택된 html 요소 오프셋 가져 오기

답변

관련 문제