[ 자바스크립트 ] className을 사용하여 태그의 너비를 통일시키기

[ 자바스크립트 ] 클래스 이름이 같은 태그들의 너비를 똑같게 만들기.
[ Javascript ] Makes the width of tags with the same class name match.

함수 없이 빈칸만 추가해서 위치 맞추기

Makes the position match with using the blank spaces, not a function.

Example 1

$1 $10.5 $100.78 $1 $10.5 $100.78

<div style="width: 100px; text-align: right"> <p>$1</p> <p>$10.5</p> <p>$100.78</p> </div> <br /> <table style="width: 100px"> <tbody align="right"> <tr><td>$1</td></tr> <tr><td>$10.5</td></tr> <tr><td>$100.78</td></tr> </tbody> </table>

---

Example 2

$1 $10.5 $100.78 $1 $10.5 $100.78

<div style="white-space: pre"> <span> $1 </span> <span> $10.5 </span> <span>$100.78</span> </div> <br /> <table style="width: 100px"> <tbody style="white-space: pre"> <tr><td> $1</td></tr> <tr><td> $10.5</td></tr> <tr><td>$100.78</td></tr> </tbody> </table>

---

Example 3

$ 1 $ 10.5 $100.78 $ 1 $ 10.5 $100.78

<div style="white-space: pre"> <span>$ 1 </span> <span>$ 10.5 </span> <span>$100.78</span> </div> <br /> <table style="width: 100px"> <tbody style="white-space: pre"> <tr><td>$ 1</td></tr> <tr><td>$ 10.5</td></tr> <tr><td>$100.78</td></tr> </tbody> </table>

---

함수 사용하기

Uses function.

matchWidth 함수 만들기

Makes "matchWidth" function.

 
<script type="text/javascript">

function matchWidth ( className /* , textAlign , parent */ ) { 

        var type = typeof className; 

        if ( type != "string" ) return arguments; 

        type = typeof arguments[ 1 ]; 

        if ( type == "string" ) { 

                var textAlign = arguments[ 1 ]; 

                type = typeof arguments[ 2 ]; 

                var parent = ( type == "object" && arguments[ 2 ] != "null" ) ? arguments[ 2 ] : document; 
        } 
        else { 
                var parent = ( type == "object" && arguments[ 1 ] != "null" ) ? arguments[ 1 ] : document; 

                type = typeof arguments[ 2 ]; 

                var textAlign = ( type == "string" ) ? arguments[ 2 ] : ""; 
        } 


        className = className.replace( /^s+|s+$/g, "" ); 

        if ( textAlign ) { 

                textAlign = textAlign.replace( /^s+|s+$/g, "" ); 

                var align = " left right center justify initial inherit "; 

                if ( align.indexOf( " " + textAlign + " " ) < 0 ) textAlign = ""; 
        } 

        if ( ! ( parent != document && "tagName" in parent ) ) parent = document; 


        var x, text, obsolete, tags, tag, display, clientWidth; 

        var width = 0; 

        if ( parent.getElementsByClassName ) { 

                obsolete = false; 

                tags = parent.getElementsByClassName( className ); 
        } 
        else { 
                obsolete = true; 

                tags = parent.getElementsByTagName( "*" ); 
        } 


        for ( x = 0; x < tags.length; x++ ) { 

                if ( obsolete ) { 

                        text = " " + tags[ x ].className + " "; 

                        if ( text.indexOf( " " + className + " " ) < 0 ) continue; 
                } 

                clientWidth = getClientWidth( tags[ x ] ); 

                if ( width < clientWidth ) width = clientWidth; 
        } 

        for ( x = 0; x < tags.length; x++ ) { 

                if ( obsolete ) { 

                        text = " " + tags[ x ].className + " "; 

                        if ( text.indexOf( " " + className + " " ) < 0 ) continue; 
                } 

                tag = tags[ x ]; 

                if ( window.getComputedStyle ) display = window.getComputedStyle( tag, "" ).display; 
                else display = tag.currentStyle.display; 

                if ( display == "inline" ) tag.style.display = "inline-block"; 

                if ( textAlign ) tag.style.textAlign = textAlign; 

                tag.style.width = width + "px"; 
        } 

        return arguments; 
} 

function getClientWidth ( tag ) {

        var width = tag.clientWidth; 

        if ( width == 0 ){ 

                var clone = tag.cloneNode( true ); 

                tag.appendChild( clone ); 

                clone.style.display = "inline-block"; 

                width = clone.clientWidth; 

                tag.removeChild( clone ); 
        } 

        return width; 
} 
</script>
 

※ 위의 matchWidth 함수를 사용할 때, 함수의 괄호 안에, 해당하는 클래스 이름(className)은 반드시 넣어주어야 합니다.
    When using "matchWidth" function above, you must type the related class name (className) in the brackets of function.

---

Example 1

$1 $10.5 $100.78 $1 $10.5 $100.78

<div style="width: 100px; text-align: right"> <p> $<span class="cost">1</span> </p> <p> $<span class="cost">10.5</span> </p> <p> $<span class="cost">100.78</span> </p> </div> <table id="myTable" border="1" style="width: 100px"> <tbody align="right"> <tr><td> $<span class="price">1</span> </td></tr> <tr><td> $<span class="price">10.5</span> </td></tr> <tr><td> $<span class="price">100.78</span> </td></tr> </tbody> </table> <input type="button" value=" Click me " onclick='testing()' /> <script type="text/javascript"> function testing() { matchWidth( "cost" ); matchWidth( "price", myTable ); } </script>

※ 함수의 괄호 안에서, 맨 처음에 오는 값은 반드시 클래스 이름(className)이어야 합니다.
    The first parameter, entered in the brackets of function, must be a class name (className).

---

Example 2

$1 $10.5 $100.78 $1 $10.5 $100.78

<div style="width: 100px"> <p> $<span class="cost">1</span> </p> <p> $<span class="cost">10.5</span> </p> <p> $<span class="cost">100.78</span> </p> </div> <table id="myTable" border="1" style="width: 100px"> <tbody> <tr><td> $<span class="price">1</span> </td></tr> <tr><td> $<span class="price">10.5</span> </td></tr> <tr><td> $<span class="price">100.78</span> </td></tr> </tbody> </table> <script type="text/javascript"> matchWidth( "cost", "right" ); matchWidth( "price", "right", myTable ); </script>

---

Example 3

1 10.5 100.78 1 10.5 100.78

<div id="myDiv" style="width: 100px; text-align: right"> <p> <span class="myInt">1</span><span class="myDec"></span> </p> <p> <span class="myInt">10</span><span class="myDec">.5</span> </p> <p> <span class="myInt">100</span><span class="myDec">.78</span> </p> </div> <table id="myTable" border="1" style="width: 100px"> <tbody align="right"> <tr><td> <span class="myInt">1</span><span class="myDec"></span> </td></tr> <tr><td> <span class="myInt">10</span><span class="myDec">.5</span> </td></tr> <tr><td> <span class="myInt">100</span><span class="myDec">.78</span> </td></tr> </tbody> </table> <script type="text/javascript"> matchWidth( "myInt", "right", myDiv ); matchWidth( "myDec", "left", myDiv ); matchWidth( "myInt", "right", myTable ); matchWidth( "myDec", "left", myTable ); </script>

※ textAlign의 값으로 넣는 것은 문자열(글자)이며 사용 가능한 값은 아래와 같습니다.
    A string that can used as the value of textAlign, is below.

    "left", "right", "center", "justify", "initial", "inherit".

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요 *^^*
If this article is helpful to you, please click the heart button below. *^^*