Thay đổi kiểu thẻ body thông qua JavaScript

Tôi đang cố viết kịch bản để thay đổi chiều rộng của trang, xem xét chiều rộng của khách hàng của người dùng. Đó là một cái gì đó như thế này:Thay đổi kiểu thẻ body thông qua JavaScript

function adjustWidth() { 
    width = 0; 
    if (window.innerHeight) { 
     width = window.innerWidth; 
    } else if (document.documentElement && document.documentElement.clientHeight) { 
     width = document.documentElement.clientWidth; 
    } else if (document.body) { 
     width = document.body.clientWidth; 
    } 
    if (width < 1152) { 
     document.getElementsByTagName("body").style.width="950px"; 
    } 
    if (width >= 1152) { 
     document.getElementsByTagName("body").style.width="1075px"; 
    } 
} 
window.onresize = function() { 
    adjustWidth(); 
}; 
window.onload = function() { 
    adjustWidth(); 
};

Với kịch bản này, tôi nhận được một lỗi từ Firebug:

document.getElementsByTagName("body").style is undefined

Bây giờ câu hỏi của tôi là, làm thế nào tôi có thể truy cập vào phong cách của cơ thể? Bởi vì trong trang css, thuộc tính selector và width của nó được định nghĩa.

Nguồn

2012-07-30 Nojan

thử ** 'getComputedStyle (yếu tố) [kiểu] '** và ** dụ' window.getComputedStyle (document.body) .width' ** .. Tìm hiểu http://javascript.info/tutorial/styles-and-classes-getcomputedstyle – KingRider

Chức năng đó trả về danh sách các nút, mặc dù chỉ có một <body>.

document.getElementsByTagName("body")[0].style = ...

Bây giờ, bạn có thể muốn xem xét việc này bằng CSS thay vì JavaScript. Với truy vấn phương tiện CSS, bạn thực hiện các điều chỉnh như vậy:

@media screen and (max-width: 1151px) { 
    body { width: 950px; } 
} 
@media screen and (min-width: 1152px) { 
    body { width: 1075px; } 
}

Truy vấn phương tiện hoạt động trong IE9 và khá nhiều các trình duyệt hiện đại khác. Đối với IE8, bạn có thể quay trở lại JavaScript hoặc chỉ để cho phần thân là 100% chiều rộng khung nhìn hoặc thứ gì đó.

Nguồn

2012-07-30 12:25:33 Pointy

cảm ơn rất nhiều. với các truy vấn phương tiện truyền thông, tôi có nên lo lắng về các vấn đề crossbrowser? – Nojan

@NOjAN cũng IE8 và trước đó không hỗ trợ truy vấn phương tiện. Nếu không chúng được hỗ trợ khá tốt, ngay cả trên iOS và Android, vv – Pointy

Không cần ** getElementsByTagName ** tồn tại lỗi trình duyệt khác, hãy thử ** 'document.body' ** – KingRider

getElementsByTagName trả về một mảng nút để bạn phải sử dụng [] để truy cập các yếu tố.

Hãy thử document.getElementsByTagName("body")[0].style

Nguồn

2012-07-30 12:25:44

document.getElementsByTagName("body")[0].style

Nguồn

2012-07-30 12:27:22 voodoo417

Luôn sử dụng' document.body' thay cho 'document.getElementsByTagName (" body ") [0]' –

Tôi tin rằng những gì bạn nhận lại từ document.getElementsByTagName("body") là HTMLCollection. Bạn sẽ có thể sử dụng document.getElementsByTagName("body")[0].style để có được những gì bạn muốn.

Nguồn

2012-07-30 12:31:53

document.getElementsByTagName('body')[0].style = 'your code';

Ví dụ:.

document.getElementsByTagName('body')[0].style = 'margin-top: -70px';

Nguồn

2017-09-19 04:39:16

Thay đổi kiểu thẻ body thông qua JavaScript

Trả lời

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