SCRIPT 스크립트로 css 스타일 속성 바꾸기 - CSS 속성 바꾸는 스크립트
페이지 정보
조회 958회 작성일 22-05-15 00:23
본문
CSS 속성 바꾸는 스크립트
스크립트로 css 스타일 속성 바꾸기
반응형 홈페이지를 만들 때 해상도에 따라 다른 디자인을 적용하는 방법은 간단하다.
@media로 한 방에 해결된다. 하지만, 특정 조건에 따라 바꾸려면 CSS로 해결하는 데에 한계가 있다.
이유는 자바스크립트로 처리해야 하기 때문이다. css에서는 사용할 수 없는 if문으로 css를 수정하는 방법을 알아본다.
스크립트로 css 스타일 속성 바꾸기 - CSS 속성 바꾸는 스크립트
자바스크립트 속성 바꾸기 방법
자바스크립트에서 사용하는 아주 간단한 방법은 아래 코드를 사용해서 css 스타일의 속성을 바꾸는 것이다.
html파일이나 php에서 바로 css 스타일 속성을 바꿀 수 있기 때문에 편리하다.
[code]
<script>
$("css 이름").css({"속성" : "옵션"});
</script>
[/code]
예를 들어, HTML에서 div의 id가 test이고, 글자 크기를 1.2em으로 하고 싶다면 아래처럼 바꾸면 된다.
[code]
<script>
$("#test").css({"font-size" : "1.2em"});
</script>
[/code]
이렇게 하면, 그 전에 CSS파일에서 #test { font-size:0.8em; }이라고 되어 있어도 크기가 바뀌는 것을 볼 수 있다.
만약 여러 가지 속성을 바꾸고 싶다면 아래처럼 계속 추가하면 된다.
[code]
<script>
$("css 이름").css({"속성" : "옵션", "속성" : "옵션", "속성" : "옵션"});
</script>
[/code]
만약 이것을 css파일에서 써준다면, 아예 처음부터 1.2em으로 나타나기 때문에 조건에 따라 바꿀 수 없는 것이다. 하지만 스크립트를 사용하기 때문에 바꿀 수가 있다.
이것이 언제 유용한 지는 아래 예제를 보면 더욱 확실히 이해가 될 것이다.
CSS 속성 바꾸는 스크립트 예제 소스
아래는 특정 조건에 따라 스크립트로 if문을 만들고, 스크립트에서 바로 css 속성을 바꾸는 예제 코드다.
즉, css파일을 열지 않고 html이나 php에서 바로 바꾸는 방법이다.
<html 파일>
[code]
<div id="before">내용</div>
<div id="after">내용</div>
<script>
var agent = navigator.userAgent.toLowerCase();
if (agent.indexOf("firefox") != -1) {
$("#before").css({"display" : "none"});
} else {
$("#after").css({"display" : "none"});
}
</script>
[/code]
if문에 들어 있는 agent.indexOf("firefox")는 "브라우저가 파이어폭스라면..."이라는 뜻이다.
즉, 파이어폭스라면 #before 객체를 숨기고, 아니라면 #after 객체를 숨기라는 것이다.
여기서 중요한 것은 $("#before").css({"display" : "none"}); 부분이다.
before와 after에 있는 display 속성을 스크립트를 이용해서 none으로 바꿔버렸다.
이렇게 하면 조건에 따라 특정 요소를 보이거나 안 보이게 하거나, 또는 조건에 맞을 때만 나타나게도 할 수 있다.
스크립트로 속성 바꾸기 주의사항
위와 같이 하면 원래의 객체에 display 속성이 있던 없던, 다른 값을 정해놨었던 간에 무조건 원하는 형태로 바꿀 수 있다.
위에서는 조건을 브라우저의 종류로 했지만, 모바일인지, PC인지 등등의 여러 가지 조건에 따라 다양하게 활용할 수 있는 것이다.
하지만 중요한 것은, 이 스크립트는 이미 개체가 로딩된 후에야 적용이 가능하다는 것이다. 즉, 개체보다 나중에 스크립트 코드를 써야 한다.
[code]
1. script 코드
2. style 코드
3. html 코드
[/code]
이런 순서로 저장하면 적용이 되지 않는다. 그러므로 아래처럼 저장해야 효과를 볼 수 있다.
[code]
1. style 코드
2. html 코드
3. script 코드
[/code]
그러니까 순서에 주의하지 않으면 뭐가 문제인지 모르는 상태가 되니까, 순서를 확인하라는 말이다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
위에서 사용한 if문의 브라우저 알아내기 방법은 아래의 링크를 통해서 배울 수 있다.
링크 : http://www.kiss7.kr/siteblog/33
"브라우저 확인 스크립트 - 브라우저 엔진 알아내는 방법"
관련링크
-
http://www.kiss7.kr/siteblog/33
110회 연결