JavaScript를 사용하여 페이지 너비를 기반으로 CSS 스타일을 변경하십시오.

Question

페이지의 현재 너비를 확인하고이를 기반으로 연결된 CSS 스타일을 변경하는 외부 JavaScript 파일을 만들어야하는 클래스에 대한 과제를 수행하고 있습니다. 페이지가로드되거나 크기가 조정될 때마다 발생합니다. 일반적으로, 우리는 우리의 임무를 수행하지 못하게하는 예제를 제공 받지만, 이번에는 그렇지 않았습니다.

본질적으로 스타일을 변경하려면 if ... then 문을 사용해야합니다. 나는 함수에 대한 적절한 설명이 무엇인지 전혀 모른다. 나는 주변을 둘러 보았고 잠재적 인 해결책은 수업을 진행하기에 너무 빠르거나 내가 필요로하는 것을 해결하지 못한다. 내가 아는 한 jQuery 나 CSS 쿼리를 사용할 수 없다.

누군가가 내게이 글을 쓸 방법을 보여줄 수 있다면, 나는 매우 감사 할 것입니다.

Answer 1

CSS 및 미디어 쿼리를 사용하십시오. 스타일을 js로 변경하는 것은 좋지 않은 생각입니다.

Answer 2

이 코드를 시도

HTML은

<div id="resize" style="background:red; height: 100px; width: 100px;"></div> 

자바 스크립트 내가 여기 TESTRESIZE 보고에 대한 귀하의 브라우저의 크기를 조정하려고 나를 알고하자 샘플을 만들 수 있습니다

var resize = document.getElementById('resize'); 
window.onresize=function(){ 
    if(window.innerWidth <= 500) { 
     resize.style = "background:blue; height: 100px; width: 100px;"; 
    } 
    else { 
     resize.style = "background:red; height: 100px; width: 100px;"; 
    } 
}; 

입니다 그것은 당신이 찾고있는 것입니다.

Answer 3

// 사용이 //

당신이 뭘하려 먼저 귀하의 최고의 기회를 제공하고 게시 할 필요가

function adjustStyle() { 
var width = 0; 
// get the width.. more cross-browser issues 
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; 
} 
// now we should have it 
if (width < 799) { 
    document.getElementById("CSS").setAttribute("href",  "http://carrasquilla.faculty.asu.edu/GIT237/smallStyle.css"); 
} else { 
    document.getElementById("CSS").setAttribute("href", "http://carrasquilla.faculty.asu.edu/GIT237/largeStyle.css"); 
} 
} 

// now call it when the window is resized. 
window.onresize = function() { 
adjustStyle(); 
}; 
window.onload = function() { 
adjustStyle(); 
};