Đặt chiều rộng và chiều cao DIV trong JavaScript

108

Tôi có một divvới id="div_register". Tôi muốn đặt nó widthđộng trong JavaScript.

Tôi đang sử dụng mã sau:

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

nhưng dòng mã này không hoạt động.

Tôi cũng đã thử sử dụng các đơn vị pxnhư sau, vẫn không thành công:

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

và

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

và

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

nhưng không có mã nào trong số này làm việc cho tôi.

Tôi không biết chuyện gì đang xảy ra.

Tôi đang sử dụng Mozilla Firefox.

BIÊN TẬP

<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
nguồn
Bạn đã thử đặt chiều rộng sau khi onloadsự kiện diễn ra chưa?
— Cyclonecode
1
Bạn đã kiểm tra, đó div_registercó phải là id phù hợp của phần tử của bạn không? Có lẽ cung cấp cho chúng tôi một số html, quá ... style.width="500px";nên đúng.
— powerMicha
tôi đã đặt document.getElementById ('div_register'). style.display = 'block', và sau đó đặt document.getElementById ('div_regsiter'). style.width = '500px';
— Saswat
1
Đối với những gì đáng giá của nó, bạn mắc lỗi chính tả trong từ "tài liệu" ở dòng 3 & 4 trong hàm của bạn ... điều này chắc chắn sẽ khiến nó không hoạt động.
— Daniel Szabo
1
sử dụng onclick="show_update_profile()"thay vìonclick="javascript:show_update_profile()"
— Tejasva Dhyani

Câu trả lời:

227

Các thuộc tính bạn đang sử dụng có thể không hoạt động trong Firefox, Chrome và các trình duyệt không phải IE khác. Để làm cho điều này hoạt động trên tất cả các trình duyệt, tôi cũng khuyên bạn nên thêm những điều sau:

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

Để tương thích chéo, bạn sẽ vẫn cần sử dụng thuộc tính. Thứ tự cũng có thể quan trọng. Ví dụ: trong mã của tôi, khi đặt thuộc tính kiểu bằng JavaScript, trước tiên tôi đặt thuộc tính kiểu, sau đó đặt thuộc tính:

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

Do đó, ví dụ tương thích với nhiều trình duyệt nhất cho bạn sẽ là:

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

Tôi cũng muốn chỉ ra rằng một phương pháp quản lý kiểu dễ dàng hơn nhiều là sử dụng bộ chọn lớp CSS và đưa các kiểu của bạn vào các tệp CSS bên ngoài. Mã của bạn không chỉ sẽ dễ bảo trì hơn mà còn thực sự kết bạn với các nhà thiết kế Web của bạn!

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

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

.hide {
    display:none;
}

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

Bây giờ, tôi có thể dễ dàng chỉ cần thêm và xóa một thuộc tính lớp, một thuộc tính duy nhất, thay vì gọi nhiều thuộc tính. Ngoài ra, khi nhà thiết kế Web của bạn muốn thay đổi định nghĩa của nghĩa là rộng, họ không cần phải loay hoay tìm mã JavaScript được duy trì đẹp mắt của bạn. Mã JavaScript của bạn vẫn không bị ảnh hưởng, nhưng chủ đề của ứng dụng của bạn có thể dễ dàng tùy chỉnh.

Kỹ thuật này tuân theo quy tắc tách nội dung (HTML) khỏi hành vi (JavaScript) và bản trình bày (CSS) của bạn.

— jmort253
nguồn
1
Điều này sẽ không ghi đè tất cả các thuộc tính kiểu khác phải không? Như đã đề cập trong một bình luận cho câu hỏi, display: blockcũng đã được đặt.
— powerMicha
2
Đặt mọi thứ cùng một lúc khi sử dụng thuộc tính style. Trong ví dụ của tôi từ mã làm việc và thử nghiệm của riêng tôi, tôi đặt display:block;cursor:pointer;cursor:handtất cả trong cùng một lệnh gọi setAttribute. Nếu bạn muốn cuộc sống của mình dễ dàng hơn, hãy sử dụng thư viện JavaScript tiến bộ như jQuery. Lý do duy nhất tôi sử dụng JavaScript thô trong mã của mình là vì nó dành cho mã nhúng trên các trang web khách hàng, vì vậy các môi trường thực tế sẽ khác nhau giữa các trang web và cách dễ nhất để tránh xung đột thư viện là không sử dụng chúng.
— jmort253
1
Tôi đã thêm một ví dụ khác sử dụng thuộc tính lớp. Kỹ thuật này tuân theo quy tắc tách nội dung (HTML) khỏi hành vi (JavaScript) và bản trình bày (CSS) của bạn. Nó cũng loại bỏ các chi tiết thực tế của kiểu dáng bằng cách tạo cho nó một className dễ làm việc.
— jmort253,
@jmort: +1. Nhưng chỉ trong tên chính xác, Chrome / FireFox / Safari tất cả các hỗ trợ các thao tác của các thuộc tính trong câu hỏi (ví dụ: element.style.height, element.style.width, vv)
— Daniel Szabo
Hmmm, tôi biết rằng trong mã của riêng tôi, để nó có thể chơi tốt với IE7, tôi đã phải làm theo một số bước rất cụ thể đã được phát hiện qua quá trình thử và sai rất khó khăn. Có thể IE7 sẽ không hoạt động bình thường với setAttribute ... Tôi không nhớ chính xác, vì vậy tôi sẽ để đây là một bài tập cho người đọc và sẽ xóa phần về chrome / FF, v.v. Tôi biết mã hoạt động, ngay cả khi tôi có thể không giải thích nó một cách chính xác. :)
— jmort253
14

Đây là một số cách để áp dụng kiểu cho một phần tử. Hãy thử bất kỳ một trong các ví dụ dưới đây:

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
nguồn
1

Sửa lỗi chính tả trong mã của bạn ("document" bị viết sai chính tả ở dòng 3 và 4 trong hàm của bạn và thay đổi trình xử lý sự kiện onclick thành đọc: onclick = "show_update_profile ()" và sau đó bạn sẽ ổn. Bạn thực sự nên làm theo lời khuyên của jmort và chỉ cần thiết lập 2 lớp css mà bạn chuyển đổi giữa các lớp trong javascript - nó sẽ giúp cuộc sống của bạn dễ dàng hơn rất nhiều và giúp bạn đỡ phải gõ thêm. Những lỗi chính tả bạn đã phạm phải là một ví dụ hoàn hảo về lý do tại sao điều này là tốt hơn tiếp cận.

Đối với điểm brownie, bạn cũng nên kiểm tra element.addEventListener để chỉ định trình xử lý sự kiện cho các phần tử của bạn.

— Daniel Szabo
nguồn
0

Nếu bạn xóa javascript:tiền tố và xóa các phần của id không xác định như 'black_fade'khỏi mã javascript của mình, điều này sẽ hoạt động trong firefox

Ví dụ cô đọng:

<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
nguồn
+1 về việc xóa "javascript:". Đó là một cấu trúc lỗi thời từ những ngày đã qua của Web 1.0.
— jmort253,
Sau đó, hãy thêm nó vào ví dụ của bạn, nếu không tập lệnh sẽ bị lỗi - btw: Bạn có biết Firebugplugin cho Firefox không? Điều này sẽ giúp bạn rất nhiều
— powerMicha
thực tế là không có gì sai trong tập lệnh của tôi ......... bởi vì tôi đã sử dụng một hộp bật lên .... đó là ngoại lệ, bởi vì tập lệnh của tôi hoạt động tốt, sử dụng javascript: nó hoạt động tốt, có thể bị lỗi thời của nó BT wasnt này một lỗi ... vấn đề là với việc cập nhật dynamicaly chiều rộng ... và giải pháp jmort đã giúp tôi kết quả giải pháp
— Saswat
Chắc chắn rồi. Tôi chỉ muốn chỉ ra rằng những phần này bị thiếu trong ví dụ, dẫn đến các vấn đề khác. Vì vậy, everthing là ổn rồi
— powerMicha
-1

Các onclickthuộc tính của một nút có một chuỗi các hoạt Javascript, không phải là một href như bạn cung cấp. Chỉ cần xóa phần "javascript:".

— jpsimons
nguồn
-1

Hãy cẩn thận span!

myspan.styles.width='100px' không muốn làm việc.

Thay đổi spanthành a div.

— Andy B
nguồn
1
Điều này là do spanlà một phần tử nội tuyến theo mặc định, và do đó sẽ không tuân theo bất kỳ kích thước nào được đặt trên nó. Thay đổi CSS của nó thành display: block, display: flexhoặc display: inline-blocksẽ khiến nó hoạt động bình thường giống như div(một phần tử khối theo mặc định).
— Daniel T.
2
Câu hỏi không bao giờ đề cập đến khoảng cách và cũng không có câu trả lời nào được đề xuất sử dụng. Tôi không thấy câu trả lời này giúp ích như thế nào.
— Vince Bowdren
1
Kỳ lạ, đây là một năm trước nên cũng không biết tại sao !! ^ _ ^
— Andy B
1
Và thay đổi styles.widththành style.width. :)
— RiZKiT
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.