이 코드를 jQuery에서 일반 자바 스크립트로 변환하는 데 도움이됩니다.

Question

내 웹 사이트의 위쪽, 왼쪽 및 오른쪽에 동적 테두리를 추가하려고합니다 ... 내 사이트의 페이지가 동적입니다. div를 웹 페이지에 간단하게 적용시키는 스크립트가 있어야합니다 ...

누구나 알고 계십니까?)을 ( 나는이 포럼에 어떤 남자에서이 스크립트를 얻었으나, 나는 높이로 (크로스 브라우저 방식으로 크기를 계산

<p class="bgr">Content content content</p> 
<script type="text/javascript"> 
$('.bgr').each(function(i,el){ 
$('<div class="bgr_left"/>').height($(this).height()+'px').appendTo($(this)); 
// similar for top, right, and bottom 
}); 
</script> 

Answer 1

... jQuery를 (요구하지 않는다) 피하려고 가져 오기 및 설정)은 일반 자바 스크립트에서 수행해야 할 매우 지루한 작업입니다. 다른 이유 중 하나는 왜 jQuery와 같은 라이브러리가 처음에 만들어 졌는지입니다.

나는 강력하게 을 거라고 어떤 프레임 워크없이 그것을 할 수 없습니다 당신에게 조언 - 당신이 좋아, jQuery를 좋아하지만, 또 다른 하나를 사용하지 않는 경우.

Answer 2

많은 사람들이 말했듯이 jQuery를 피하려고해서는 안됩니다. 그러나, 당신이 정말로 원한다면, 여기에 그것을하는 방법이 있습니다.

---

먼저 모서리를 추가 할 요소를 모두 찾아야합니다. jQuery 코드는 className이 bgr 인 모든 요소를 ​​찾습니다. 제 3 자 코드 없이는 그렇게 할 수 없습니다. 가장 간단한 해결책은 getElementsByClassName method을 사용하는 것입니다.

(elems 모서리에 추가 요소들의 어레이 임)이어서, 다음의 코드를 실행하여이 외부 소자 내부의 모든 요소가 다시 만들 것이라는

가

for (var i = 0; i < elems.length; i++) { 
    var outer = elems[i]; 

    var outerHeight = outer.offsetHeight, outerWidth = outer.offsetWidth; 

    outer.innerHtml += '<div class="bgr_left" style="height:' + outerHeight + 'px" />' 
     + '<div class="bgr_right" style="height:' + outerHeight + 'px" />' 
     + //Etc...; 
} 

주 (innerHtml을 재설정); 원하는 경우 createElement 및 appendChild을 사용하여이를 피할 수 있습니다.

Answer 3

언급 한 SLak는 getElementsByClassName을 사용할 수도 있고 Selector API를 사용할 수도 있지만 관심있는 클래스가있는 모든 것을 가져와야합니다. 루프를 들어

http://webkit.org/blog/156/queryselector-and-queryselectorall/

, 당신은, foreach는 기능을 사용하여이 페이지에서 찾아보실 수 있습니다 : http://www.hunlock.com/blogs/Mastering_Javascript_Arrays

그래서 당신은 할 수 있습니다 :

var list = document.querySelectorAll(".bgr"); 
list.foreach(function(i,el){ 
... 
}); 

당신은에 대한 선택이 필요합니다 수정할 div를 찾은 다음 style.height 속성을 설정하여 높이를 설정하고 숫자 끝에 "px"를 추가하는 것이 중요합니다.

라이브러리는 이러한 선택기를 작성해야 할 필요성을 추상화하지만 자신 만의 일반적인 목적을 작성할 수 있습니다. 그것이 당신의 코드에서 주요 노력입니다.

foreach의 경우 foreach를 지원하지 않는 브라우저에서이 코드를 사용하는 경우 앞에서 언급 한 링크에 대한 코드가 있습니다.

Answer 4

JS 프레임 워크가 없으면 매우 지루할 것입니다.

것은 아래로 속보, 당신은 일을 :

• 를 CSS 클래스를 가진 모든 요소를 ​​찾기 "BGR"그들 각각에 대해
• 을 설정 같은 렌더링 된 높이로 설정 높이 사업부를 추가 항목이 발견되었습니다.

1.) 표준 getElementsByClass() 기능은 바닐라 자바 ​​스크립트 (새로운 브라우저 일 수도 있음)에 없습니다.

2.) 실제 렌더링 된 높이를 얻으려면 IE가 다른 브라우저와 높이가 다르기 때문에 코드가 엉망이어야합니다.

3) 건물 및 새로운 DIV가 어렵지 않다,하지만 여전히 훨씬 더 복잡

<script> 
    var matches = getElementsByClass('bgr');//you need to implement 
    var match, CALCULATED_HEIGHT, newDiv; 
    for(var i=0;i<matches.length;i++){ 
    match = matches[i]; 
    CALCULATED_HEIGHT = getRenderedHeight(match);//you need to implement 
    newDiv = document.createElement('div'); 
    newDiv.setAttribute('className', 'bgr_left');//can't use 'class' due to IE bugs 
    newDiv.style.height = CALCULATED_HEIGHT + 'px';//can't use setAttribute for 'style' due to IE bugs 
    match.appendChild(newDiv); 
    } 
</script> 

Answer 5

희망 정확한 제시 jQuery를 접근보다 추가 :

(function() { 
    var elements = document.body.getElementsByTagName('*'), 
     divLeft = document.createElement('div'); 

    divLeft.className = 'bgr_left'; 

    for(var i = elements.length; i--;) { 
     var current = elements[i]; 
     if(/(^|\s)bgr(\s|$)/.test(current.className)) { 
      divLeft.style.height = current.offsetHeight + 'px'; 
      current.appendChild(divLeft.cloneNode(false)); 
     } 
    } 
})(); 

확인 MDC 및 요소 치수를 결정하는 방법에 대한 자세한 내용은 MSDN을 참조하십시오.