[javascript] JavaScript에서 DIV 너비 및 높이 설정

Program / 글쓴이

나는이 div와 함께 id="div_register". 나는 그것을 설정하고 싶다widthJavaScript에서 동적으로 .

다음 코드를 사용하고 있습니다.

getElementById('div_register').style.width=500;

하지만이 코드 줄은 작동하지 않습니다.

나는 또한 px다음과 같은 단위를 사용해 보았지만 여전히 운이 없다.

getElementById('div_register').style.width='500px';

과

getElementById('div_register').style.width='500';

과

getElementById('div_register').style.width=500px;

그러나이 코드 중 어느 것도 나를 위해 작동하지 않습니다.

나는 무엇이 잘못되고 있는지 모른다.

Mozilla Firefox를 사용하고 있습니다.

편집하다

<html>
    <head>
        <title>Untitled</title>
        <script>
            function show_update_profile() {
                document.getElementById('black_fade').style.display='block';
                //document.getElementById.('div_register').style.left=((window.innerWidth)-500)/20;
                document.getElementById('div_register').style.height= "500px";
                document.getElementById('div_register').style.width= '500px';
                //alert('kutta');
                  document.getElementById('div_register').style.display='block';
                document.getElementById('register_flag').value= 1;
                document.getElementById('physical_flag').value= 0;
                document.getElementById('cultural_flag').value= 0;
                document.getElementById('professional_flag').value= 0;
                document.getElementById('lifestyle_flag').value= 0;
                document.getElementById('hobby_flag').value= 0;
                //alert(window.innerWidth);
            }
        </script>
        <style>
            .white_content {
                display:none;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <input type="button" onclick="javascript:show_update_profile();" id="show" name="show" value="show"/>
        </div>
        <div id="div_register">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                      welcome
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

답변

사용중인 속성은 Firefox, Chrome 및 기타 비 IE 브라우저에서 작동하지 않을 수 있습니다. 모든 브라우저에서이 작업을 수행하려면 다음을 추가하는 것이 좋습니다.

document.getElementById('div_register').setAttribute("style","width:500px");

상호 호환성을 위해 여전히 속성을 사용해야합니다. 순서도 중요 할 수 있습니다. 예를 들어, 코드에서 JavaScript로 스타일 속성을 설정할 때 먼저 스타일 속성을 설정 한 다음 속성을 설정합니다.

document.getElementById("mydiv").setAttribute("style","display:block;cursor:pointer;cursor:hand;");
document.getElementById("mydiv").style.display = "block";
document.getElementById("mydiv").style.cursor = "hand";

따라서 가장 브라우저 간 호환이 가능한 예는 다음과 같습니다.

document.getElementById('div_register').setAttribute("style","display:block;width:500px");
document.getElementById('div_register').style.width='500px';

스타일을 관리하는 훨씬 더 쉬운 방법은 CSS 클래스 선택기를 사용하고 스타일을 외부 CSS 파일에 넣는 것임을 지적하고 싶습니다. 당신의 코드는 훨씬 더 관리하기 쉬울뿐만 아니라 실제로 웹 디자이너와 친구가 될 것입니다!

document.getElementById("div_register").setAttribute("class","wide");

.wide {
    display:block;
    width:500px;
}

.hide {
    display:none;
}

.narrow {
    display:block;
    width:100px;
}

이제 여러 속성을 호출하는 대신 단일 속성 인 클래스 속성을 쉽게 추가하고 제거 할 수 있습니다. 또한 웹 디자이너가 넓다는 의미의 정의를 변경하려는 경우 아름답게 유지 관리되는 JavaScript 코드를 살펴볼 필요가 없습니다. JavaScript 코드는 그대로 유지되지만 응용 프로그램의 테마는 쉽게 사용자 지정할 수 있습니다.

이 기술은 콘텐츠 (HTML)를 동작 (JavaScript) 및 프레젠테이션 (CSS)에서 분리하는 규칙을 따릅니다.

답변

다음은 요소에 스타일을 적용하는 몇 가지 방법입니다. 아래 예 중 하나를 시도하십시오.

1. document.getElementById('div_register').className = 'wide';
  /* CSS */ .wide{width:500px;}
2. document.getElementById('div_register').setAttribute('class','wide');
3. document.getElementById('div_register').style.width = '500px';

답변

코드의 오타를 수정하십시오 ( “document”의 철자가 함수의 3, 4 행에서 잘못되었습니다. onclick 이벤트 핸들러를 onclick = “show_update_profile ()”로 변경하십시오. 그러면 괜찮을 것입니다. jmort의 조언과 자바 스크립트로 전환 할 수있는 2 개의 CSS 클래스를 설정하기 만하면됩니다. 이렇게하면 삶이 훨씬 더 쉬워지고 모든 추가 입력으로부터 자신을 구할 수 있습니다. 커밋 한 오타는 이것이 왜 더 나은지에 대한 완벽한 예입니다. 접근하다.

브라우니 포인트의 경우 요소 에 이벤트 핸들러를 할당하기 위해 element.addEventListener 도 확인 해야합니다.

답변

당신은 제거 할 경우 javascript:접두사와 같은 알 수없는 ID에 대한 부분을 제거'black_fade' 하여 자바 스크립트 코드에서이 파이어 폭스에서 작동합니다

요약 된 예 :

<html>
    <head>
        <script type="text/javascript">
            function show_update_profile() {
               document.getElementById('div_register').style.height= "500px";
               document.getElementById('div_register').style.width= "500px";
               document.getElementById('div_register').style.display='block';
               return true;
           }
        </script>
        <style>
           /* just to show dimensions of div */
           #div_register
           {
                background-color: #cfc;
           }
        </style>
    </head>
    <body>
        <div id="main">
            <input type="button" onclick="show_update_profile();" value="show"/>
        </div>
        <div id="div_register">
            <table>
                <tr>
                   <td>
                     welcome
                   </td>
                </tr>
            </table>
        </div>
    </body>
</html>

답변

onclick버튼 의 속성은 제공 한 href가 아닌 JavaScript 문자열을 사용합니다. “javascript :”부분 만 제거하면됩니다.

답변

조심하세요 span!

myspan.styles.width='100px' 일하고 싶지 않습니다.

을 변경 spanA를 div.

답변