목록으로

box높이를 맞춰주는 자바스크립트에 관한 질문 채택완료

nanati 10년 전 조회 3,758

답변 3

heightLine.js 라는 자바스크립트로 각 box의 높이를 맞춰주고 있습니다.

이 스크립트에서 화면의 가로폭이 몇 이하로 줄어들면(스맛폰사이즈) 실행되지 않도록 하고 싶은데...

어떤 곳에 어떻게 추가로 써 넣어야 될까요?

if문 같은걸로 쓰는게 맞나요?

아래는 heightLine.js 스크립트 입니다.

new function(){ function heightLine(){ this.className="heightLine"; this.parentClassName="heightLineParent" reg = new RegExp(this.className+"-([a-zA-Z0-9-_]+)", "i"); objCN =new Array(); var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all; for(var i = 0; i < objAll.length; i++) { var eltClass = objAll[i].className.split(/\s+/); for(var j = 0; j < eltClass.length; j++) { if(eltClass[j] == this.className) { if(!objCN["main CN"]) objCN["main CN"] = new Array(); objCN["main CN"].push(objAll[i]); break; }else if(eltClass[j] == this.parentClassName){ if(!objCN["parent CN"]) objCN["parent CN"] = new Array(); objCN["parent CN"].push(objAll[i]); break; }else if(eltClass[j].match(reg)){ var OCN = eltClass[j].match(reg) if(!objCN[OCN]) objCN[OCN]=new Array(); objCN[OCN].push(objAll[i]); break; } } } //check font size var e = document.createElement("div"); var s = document.createTextNode("S"); e.appendChild(s); e.style.visibility="hidden" e.style.position="absolute" e.style.top="0" document.body.appendChild(e); var defHeight = e.offsetHeight; changeBoxSize = function(){ for(var key in objCN){ if (objCN.hasOwnProperty(key)) { //parent type if(key == "parent CN"){ for(var i=0 ; i<objCN[key].length ; i++){ var max_height=0; var CCN = objCN[key][i].childNodes; for(var j=0 ; j<CCN.length ; j++){ if(CCN[j] && CCN[j].nodeType == 1){ CCN[j].style.height="auto"; max_height = max_height>CCN[j].offsetHeight?max_height:CCN[j].offsetHeight; } } for(var j=0 ; j<CCN.length ; j++){ if(CCN[j].style){ var stylea = CCN[j].currentStyle || document.defaultView.getComputedStyle(CCN[j], ''); var newheight = max_height; if(stylea.paddingTop)newheight -= stylea.paddingTop.replace("px",""); if(stylea.paddingBottom)newheight -= stylea.paddingBottom.replace("px",""); if(stylea.borderTopWidth && stylea.borderTopWidth != "medium")newheight-= stylea.borderTopWidth.replace("px",""); if(stylea.borderBottomWidth && stylea.borderBottomWidth != "medium")newheight-= stylea.borderBottomWidth.replace("px",""); CCN[j].style.height =newheight+"px"; } } } }else{ var max_height=0; for(var i=0 ; i<objCN[key].length ; i++){ objCN[key][i].style.height="auto"; max_height = max_height>objCN[key][i].offsetHeight?max_height:objCN[key][i].offsetHeight; } for(var i=0 ; i<objCN[key].length ; i++){ if(objCN[key][i].style){ var stylea = objCN[key][i].currentStyle || document.defaultView.getComputedStyle(objCN[key][i], ''); var newheight = max_height; if(stylea.paddingTop)newheight-= stylea.paddingTop.replace("px",""); if(stylea.paddingBottom)newheight-= stylea.paddingBottom.replace("px",""); if(stylea.borderTopWidth && stylea.borderTopWidth != "medium")newheight-= stylea.borderTopWidth.replace("px","") if(stylea.borderBottomWidth && stylea.borderBottomWidth != "medium")newheight-= stylea.borderBottomWidth.replace("px",""); objCN[key][i].style.height =newheight+"px"; } } } } } } checkBoxSize = function(){ if(defHeight != e.offsetHeight){ changeBoxSize(); defHeight= e.offsetHeight; } } changeBoxSize(); setInterval(checkBoxSize,1000) window.onresize=changeBoxSize; } function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent("on"+listener,fn); } } addEvent(window,"load",heightLine);}

#javascript

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

정렬:

채택된 답변

+20 포인트

thisgun

10년 전

다시 이렇게 고쳐 보세요...

</p><p>new function(){</p><p> </p><p>function heightLine(){</p><p> </p><p>    this.className="heightLine";</p><p>    this.parentClassName="heightLineParent"</p><p>    reg = new RegExp(this.className+"-([a-zA-Z0-9-_]+)", "i");</p><p>    objCN =new Array();</p><p>    var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all;</p><p>    for(var i = 0; i < objAll.length; i++) {</p><p>        var eltClass = objAll[i].className.split(/\s+/);</p><p>        for(var j = 0; j < eltClass.length; j++) {</p><p>            if(eltClass[j] == this.className) {</p><p>                if(!objCN["main CN"]) objCN["main CN"] = new Array();</p><p>                objCN["main CN"].push(objAll[i]);</p><p>                break;</p><p>            }else if(eltClass[j] == this.parentClassName){</p><p>                if(!objCN["parent CN"]) objCN["parent CN"] = new Array();</p><p>                objCN["parent CN"].push(objAll[i]);</p><p>                break;</p><p>            }else if(eltClass[j].match(reg)){</p><p>                var OCN = eltClass[j].match(reg)</p><p>                if(!objCN[OCN]) objCN[OCN]=new Array();</p><p>                objCN[OCN].push(objAll[i]);</p><p>                break;</p><p>            }</p><p>        }</p><p>    }</p><p>    </p><p>    //check font size</p><p>    var e = document.createElement("div");</p><p>    var s = document.createTextNode("S");</p><p>    var sw = false;</p><p>    e.appendChild(s);</p><p>    e.style.visibility="hidden"</p><p>    e.style.position="absolute"</p><p>    e.style.top="0"</p><p>    document.body.appendChild(e);</p><p>    var defHeight = e.offsetHeight;</p><p>    </p><p>    changeBoxSize = function(){</p><p> </p><p>      var w = window,</p><p>      d = document,</p><p>      e = d.documentElement,</p><p>      g = d.getElementsByTagName('body')[0],</p><p>      x = w.innerWidth || e.clientWidth || g.clientWidth;</p><p> </p><p>      if ( x < 400 ){ // x는 width</p><p>          sw = true;</p><p>          return;</p><p>      } else {</p><p>          sw = false;</p><p>      }</p><p> </p><p>        for(var key in objCN){</p><p>            if (objCN.hasOwnProperty(key)) {</p><p>                //parent type</p><p>                if(key == "parent CN"){</p><p>                    for(var i=0 ; i<objCN[key].length ; i++){</p><p>                        var max_height=0;</p><p>                        var CCN = objCN[key][i].childNodes;</p><p>                        for(var j=0 ; j<CCN.length ; j++){</p><p>                            if(CCN[j] && CCN[j].nodeType == 1){</p><p>                                CCN[j].style.height="auto";</p><p>                                max_height = max_height>CCN[j].offsetHeight?max_height:CCN[j].offsetHeight;</p><p>                            }</p><p>                        }</p><p>                        for(var j=0 ; j<CCN.length ; j++){</p><p>                            if(CCN[j].style){</p><p>                                var stylea = CCN[j].currentStyle || document.defaultView.getComputedStyle(CCN[j], '');</p><p>                                var newheight = max_height;</p><p>                                if(stylea.paddingTop)newheight -= stylea.paddingTop.replace("px","");</p><p>                                if(stylea.paddingBottom)newheight -= stylea.paddingBottom.replace("px","");</p><p>                                if(stylea.borderTopWidth && stylea.borderTopWidth != "medium")newheight-= stylea.borderTopWidth.replace("px","");</p><p>                                if(stylea.borderBottomWidth && stylea.borderBottomWidth != "medium")newheight-= stylea.borderBottomWidth.replace("px","");</p><p>                                CCN[j].style.height =newheight+"px";</p><p>                            }</p><p>                        }</p><p>                    }</p><p>                }else{</p><p>                    var max_height=0;</p><p>                    for(var i=0 ; i<objCN[key].length ; i++){</p><p>                        objCN[key][i].style.height="auto";</p><p>                        max_height = max_height>objCN[key][i].offsetHeight?max_height:objCN[key][i].offsetHeight;</p><p>                    }</p><p>                    for(var i=0 ; i<objCN[key].length ; i++){</p><p>                        if(objCN[key][i].style){</p><p>                            var stylea = objCN[key][i].currentStyle || document.defaultView.getComputedStyle(objCN[key][i], '');</p><p>                                var newheight = max_height;</p><p>                                if(stylea.paddingTop)newheight-= stylea.paddingTop.replace("px","");</p><p>                                if(stylea.paddingBottom)newheight-= stylea.paddingBottom.replace("px","");</p><p>                                if(stylea.borderTopWidth && stylea.borderTopWidth != "medium")newheight-= stylea.borderTopWidth.replace("px","")</p><p>                                if(stylea.borderBottomWidth && stylea.borderBottomWidth != "medium")newheight-= stylea.borderBottomWidth.replace("px","");</p><p>                                objCN[key][i].style.height =newheight+"px";</p><p>                        }</p><p>                    }</p><p>                }</p><p>            }</p><p>        }</p><p>    }</p><p>    </p><p>    checkBoxSize = function(){</p><p>        if(defHeight != e.offsetHeight && !sw){</p><p>            changeBoxSize();</p><p>            defHeight= e.offsetHeight;</p><p>        }</p><p>    }</p><p>    changeBoxSize();</p><p>    setInterval(checkBoxSize,1000)</p><p>    window.onresize=changeBoxSize;</p><p>}</p><p> </p><p>function addEvent(elm,listener,fn){</p><p>    try{</p><p>        elm.addEventListener(listener,fn,false);</p><p>    }catch(e){</p><p>        elm.attachEvent("on"+listener,fn);</p><p>    }</p><p>}</p><p>addEvent(window,"load",heightLine);</p><p> </p><p>} </p><p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

nanati

10년 전

짱짱짱!!! 해결되었네요 !! 멋져브러... ㅎㅎ
근데 이 페이지에서만 적용하고 싶었는데
다른페이지까지 싹다 적용되어서 ㅋㅋ 써먹을 수가 없다는거..ㅡ_ ㅡ;;;;
너무 고생해주셨는데 죄송합니다
무지무지 감사해요!!!

thisgun

10년 전

다행이네요 ㅎ;
Good job~!

댓글을 작성하려면 로그인이 필요합니다.

thisgun

10년 전

checkBoxSize 함수를 아래와 같이 고쳐보세요.

잘될지 안될지 장담은 못하겠네요...;;

</p><p><span class="Apple-tab-span" style="white-space: pre;">		</span>checkBoxSize = function(){</p><p> </p><p>            var w = window,</p><p>            d = document,</p><p>            e = d.documentElement,</p><p>            g = d.getElementsByTagName('body')[0],</p><p>            x = w.innerWidth || e.clientWidth || g.clientWidth;</p><p> </p><p>            if ( x < 400 ){ // x는 width</p><p>                return;</p><p>            }</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">			</span>if(defHeight != e.offsetHeight){</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>changeBoxSize();</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>defHeight= e.offsetHeight;</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>}</p><p><span class="Apple-tab-span" style="white-space: pre;">		</span>} </p><p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

nanati

10년 전

답변 감사드립니다!!
한번 시도해 보겠습니당!! ㅎ

nanati

10년 전

흐억.. 안타깝게도 적용이 안되네요 ㅠ ㅠ...
답변감사드립니다 ... ㅠ ㅠ

thisgun

10년 전

안되다니 ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

쟁반짜장

10년 전

http://blog.webcreativepark.net/2013/10/21-112000.html">http://blog.webcreativepark.net/2013/10/21-112000.html

여기 쭈욱 보다 보니...

ウィンドウ幅640px以上の場合のみ高さを揃えたい場合はminWidthオプションを指定します。

이런 문장이 있어서요.

잘은 모르겠지만 저 문서 참고해 보시면 어떨까 싶네요.

이미 보셨다면 패스요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

nanati

10년 전

답변 감사드립니다 ㅠ ㅠ...
배포하는 사이트 (위 말씀하신)에서 반응형 js가 따로 나왔더라구요..
그 js를 깔면, 지금까지 만들었던 게 적용이 안되거나 하는 일이 발생해서 ..
예전 버전으로 이용하고 있거든요...
아무래도 좀 더 연구해봐야 할 것 같네요;ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

box높이를 맞춰주는 자바스크립트에 관한 질문 채택완료

답변 3개

답변에 대한 댓글 2개

답변에 대한 댓글 3개

답변에 대한 댓글 1개

공유하기