JavaScript에서 DIV 너비 및 높이 설정

108

나는이 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>

javascript

— Saswat
소스

onload이벤트가 발생한 후 너비를 설정해 보셨습니까 ?

— Cyclonecode

1

div_register요소의 올바른 ID 인지 확인 했습니까 ? 어쩌면 우리에게 약간의 html을 줄 수도 style.width="500px";있습니다.

— powerMicha

document.getElementById ( 'div_register'). style.display = 'block'을 설정 한 다음 document.getElementById ( 'div_regsiter'). style.width = '500px'를 설정했습니다.

— Saswat

1

그 가치가 무엇인지, 함수의 3, 4 행에 "문서"라는 단어에 오타가 있습니다. 이는 확실히 작동하지 못하게합니다.

— 다니엘 자보

1

사용 onclick="show_update_profile()"대신에onclick="javascript:show_update_profile()"

— Tejasva Dhyani

227

사용중인 속성은 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)에서 분리하는 규칙을 따릅니다.

— jmort253
소스

1

이것은 다른 모든 스타일 속성을 재정의하지 않습니까? 질문에 대한 의견에서 언급했듯이, display: block또한 설정되었습니다.

— powerMicha

2

style 속성을 사용할 때 모든 것을 한 번에 설정하십시오. 내 자신의 테스트되고 작동하는 코드의 예제에서 display:block;cursor:pointer;cursor:hand모두 동일한 setAttribute 호출에 넣었습니다 . 삶을 더 편하게 만들고 싶다면 jQuery와 같은 진보적 인 JavaScript 라이브러리를 사용하세요. 내 코드에서 원시 JavaScript를 사용한 유일한 이유는 클라이언트 웹 사이트의 임베드 코드를위한 것이기 때문에 실제 환경은 사이트마다 다르며 라이브러리 충돌을 방지하는 가장 쉬운 방법은 사용하지 않는 것입니다.

— jmort253

1

클래스 속성을 사용하는 또 다른 예를 추가했습니다. 이 기술은 콘텐츠 (HTML)를 동작 (JavaScript) 및 프레젠테이션 (CSS)에서 분리하는 규칙을 따릅니다. 또한 className으로 작업하기 쉬운 스타일을 제공하여 스타일링의 실제 세부 사항을 추상화합니다.

— jmort253

@jmort : +1. 그러나 단지 정도의 이름으로, 크롬 / 파이어 폭스 / 사파리 모든 지원을 해당 속성의 조작 (예 : element.style.height, element.style.width 등)

— 다니엘 자보

흠, 내 코드에서 IE7에서 잘 작동하도록하려면 매우 고통스러운 시행 착오를 통해 발견 된 매우 구체적인 단계를 따라야했습니다. IE7이 setAttribute로 제대로 작동하지 않을 수도 있습니다 ... 정확히 기억이 나지 않으므로이 부분은 독자를위한 연습으로 남겨두고 chrome / FF 등에 대한 부분을 제거하겠습니다. 코드를 알고 있습니다. 제대로 설명하지 않더라도 작동합니다. :)

— jmort253

14

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

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';

— Valli69
소스

1

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

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

— 다니엘 자보
소스

0

당신은 제거 할 경우 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>

— powerMicha
소스

"javascript :"제거에 대한 +1. 이것은 웹 1.0의 오래전부터 구식 구조입니다.

— jmort253

그런 다음 예제에 추가하십시오. 그렇지 않으면 스크립트가 실패합니다-btw : FirebugFirefox 용 플러그인을 알고 있습니까? 이것은 당신에게 많은 도움이 될 것입니다

— powerMicha

실제로 내 스크립트에는 아무 문제가 없었습니다 .......... 팝업 상자를 사용하고 있었기 때문입니다 .... 내 스크립트가 javascript를 사용하여 잘 작동했기 때문에 주제에서 벗어났습니다. 그것의 구식 bt 이것은 오류가 아니었다 ... 문제는 너비를 동적으로 업데이트하는 데 있었다 ... 그리고 jmort의 솔루션은 내가 해결책을 얻는 데 도움이되었다

— Saswat

확실한. 이 부분이 예제에서 누락되어 다른 문제로 이어진다는 점을 지적하고 싶었습니다. 그래서 모든게 지금은 괜찮

— powerMicha

-1

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

— jpsimons
소스

-1

조심하세요 span!

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

을 변경 spanA를 div.

— 앤디 B
소스

1

이것은 span기본적으로 인라인 요소이므로 크기 설정을 따르지 않기 때문입니다. CSS를 display: block, display: flex또는 로 변경하면 (기본적으로 블록 요소) display: inline-block처럼 제대로 작동 div합니다.

— 다니엘 T.

2

질문은 span을 언급하지 않았으며 하나를 사용하여 제안 된 답변도 없습니다. 이 답변이 어떻게 도움이되는지 모르겠습니다.

— Vince Bowdren 2016

1

이상하네요, 이것은 1 년 전 이었기 때문에 이유도 확실하지 않습니다 !! ^ _ ^

— Andy B

1

그리고 변경 styles.width에 style.width. :)

— RiZKiT