JavaScript를 통해 본문 태그 스타일 변경

사용자의 클라이언트 너비를 고려하여 페이지 너비를 변경하는 스크립트를 작성하려고합니다. 그것은이 같은 뭔가 :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(); 
};

나는 방화범이 끌려에서 오류가이 스크립트 :

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

지금 내 질문은, 내가 어떻게 신체의 스타일에 액세스 할 수 있습니다

? CSS 시트에서 selector와 width 속성이 정의 되었기 때문입니다.

출처

2012-07-30 Nojan

시도 **'getComputedStyle (요소) 스타일] ** '예'window.getComputedStyle ** (는 document.body) .width' ** .. . learn http://javascript.info/tutorial/styles-and-classes-getcomputedstyle – KingRider

<body> 하나만 있다고해도이 함수는 노드 목록을 반환합니다.

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

이제 자바 스크립트 대신 CSS를 사용하는 것이 좋습니다. CSS 미디어 쿼리를 사용하면 다음과 같이 조정할 수 있습니다.

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

미디어 쿼리는 IE9와 거의 모든 다른 최신 브라우저에서 작동합니다. IE8의 경우 자바 스크립트로 돌아가거나 본문을 뷰포트 너비 또는 그 이상의 100 %로 만들 수 있습니다.

출처

2012-07-30 12:25:33 Pointy

고마워요. 미디어 쿼리를 사용하여 크로스 브라우저 문제에 관심을 가져야합니까? – Nojan

@NOjAN 잘 IE8 및 이전 버전은 미디어 쿼리를 지원하지 않습니다. 그렇지 않으면 iOS 및 Android 등에서도 꽤 잘 지원됩니다. – Pointy

** getElementsByTagName ** 다른 브라우저에서는 버그가 있습니다. **'document.body' ** – KingRider

getElementsByTagName은 노드 배열을 반환하므로 요소에 액세스하려면 []을 사용해야합니다.

는

출처

2012-07-30 12:25:44

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

출처

2012-07-30 12:27:22 voodoo417

'document.getElementsByTagName ("body") [0]'대신 항상'document.body'를 사용하십시오. –

document.getElementsByTagName("body")[0].style 난 당신이 document.getElementsByTagName("body")이 HTMLCollection이다에서 돌아갈 것을 생각하십시오. 원하는 것을 얻으려면 document.getElementsByTagName("body")[0].style을 사용할 수 있어야합니다.

출처

2012-07-30 12:31:53

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

예 :.

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

출처

2017-09-19 04:39:16

JavaScript를 통해 본문 태그 스타일 변경

답변

관련 문제