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

Tôi có một số div với id="div_register". Tôi muốn tự động đặt width trong JavaScript.Đặt chiều rộng và chiều cao DIV trong JavaScript

Tôi đang sử dụng mã này như sau:

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

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

Tôi cũng đã cố gắng sử dụng các đơn vị px như sau, vẫn không có may mắn:

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

và

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

và

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

nhưng không ai trong mã này đang 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.

EDIT

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

Nguồn

2012-04-12 Saswat

Bạn đã cố thiết lập chiều rộng sau khi sự kiện 'onload' đã xảy ra chưa? – Cyclonecode

Bạn đã kiểm tra, 'div_register' có phải là id đúng của phần tử của bạn không? Có thể cung cấp cho chúng tôi một số html, quá ... 'style.width =" 500px ";' phải là đúng. – powerMicha

tôi đã đặt document.getElementById ('div_register'). Style.display = 'block', và sau đó đặt document.getElementById ('div_regsiter'). Style.width = '500px'; – Saswat

158

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

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

Để tương thích chéo, bạn sẽ vẫn cần phải sử dụng thuộc tính. Đặt hàng cũng có thể quan trọng. Ví dụ, trong mã của tôi, khi thiết lập các thuộc phong cách với Javascript, tôi đặt thuộc tính phong cách đầu tiên, sau đó tôi thiết lập các 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 đó, mức cao nhất qua trình duyệt ví dụ tương thích 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ý dễ dàng hơn nhiều là sử dụng bộ chọn lớp CSS và đặt kiểu của bạn trong các tệp CSS bên ngoài. Không chỉ mã của bạn sẽ được duy trì nhiều hơn, nhưng bạn sẽ 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 thêm và xóa 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 về ý nghĩa của việc mở rộng, người đó không cần phải đi xung quanh trong 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 của bạn (JavaScript) và bản trình bày (CSS) của bạn.

Nguồn

2012-04-12 06:05:00 jmort253

Sẽ không ghi đè lên tất cả các thuộc tính kiểu khác? Như đã đề cập trong một nhận xét cho câu hỏi, 'display: block' cũng được thiết lập. – powerMicha

Đặt mọi thứ cùng một lúc khi sử dụng thuộc tính kiểu. Trong ví dụ của tôi từ mã thử nghiệm và làm việc của riêng tôi, tôi đặt 'display: block; cursor: pointer; cursor: hand' tất cả trong cùng một lời gọi setAttribute. Nếu bạn muốn cuộc sống của mình trở nên dễ dàng hơn, hãy sử dụng một thư viện JavaScript tiến bộ như jQuery. Lý do duy nhất tôi sử dụng JavaScript nguyên trong mã của tôi là vì mã nhúng cho các trang web của khách hàng, vì vậy môi trường thực tế sẽ khác với trang web và cách dễ nhất để tránh xung đột thư viện trong tự nhiên là không sử dụng chúng. – jmort253

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 của bạn (HTML) khỏi hành vi của bạn (JavaScript) và bản trình bày của bạn (CSS). Nó cũng tóm tắt các chi tiết thực tế của kiểu dáng bằng cách cho nó một className dễ làm việc. – jmort253

-1

Thuộc tính onclick của một nút có chuỗi JavaScript, không phải là một href như bạn đã cung cấp. Chỉ cần xóa phần "javascript:".

Nguồn

2012-04-12 06:28:02 jpsimons

Nếu bạn loại bỏ các tiền tố javascript: và loại bỏ các phụ tùng cho các id chưa biết như 'black_fade' từ mã javascript của bạn, điều này sẽ làm việc trong firefox

dụ Condensed:

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

Nguồn

2012-04-12 06:50:34 powerMicha

+1 khi xóa "javascript:".Đó là một cấu trúc lỗi thời từ những ngày dài của Web 1.0. – jmort253

Tôi cần div_fade – Saswat

Sau đó, hãy thêm nó vào ví dụ của bạn, nếu không tập lệnh sẽ không thành công - btw: Bạn có biết plugin 'Firebug' cho Firefox không? Điều này sẽ giúp bạn rất nhiều – powerMicha

Fix các lỗi chính tả trong mã của bạn ("tài liệu" được viết sai trên dòng 3 & 4 của hàm của bạn và thay đổi trình xử lý sự kiện onclick để đọ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 css lớp học mà bạn chuyển đổi giữa trong javascript - nó wou ld làm cho cuộc sống của bạn dễ dàng hơn nhiều và tiết kiệm cho mình từ tất cả các đánh máy thêm. Các lỗi chính tả bạn đã cam kết là một ví dụ hoàn hảo về lý do tại sao đây là cách tiếp cận tốt hơn.

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

Nguồn

2012-04-12 07:01:08

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

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

Nguồn

2012-04-12 08:17:26 Valli69

Hãy cẩn thận với span!

myspan.styles.width='100px' không muốn hoạt động.

Thay đổi span thành div.

Nguồn

2015-09-11 14:49:56

Điều này là do 'span' là một yếu tố nội tuyến theo mặc định, và do đó sẽ không tuân theo bất kỳ kích thước đặt trên đó. Thay đổi CSS thành 'display: block',' display: flex', hoặc 'display: inline-block' sẽ làm cho nó hoạt động đúng giống như' div' (một phần tử khối theo mặc định). –

Câu hỏi không bao giờ đề cập đến một * span *, và không có câu trả lời được đề xuất sử dụng một trong hai. Tôi không thấy câu trả lời này giúp ích gì cả. –

Lạ lùng, đây là một năm trước vì vậy không chắc chắn lý do tại sao !!^_ ^ –

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

Trả lời

Các vấn đề liên quan