Jquery를 이용한 하나의 예를 들어보자.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#mydiv").click(function(){
var myHeight = $(window).height() + 'px';
$("#mydiv").attr("style", 'height: ' + myHeight + " important; margin: 10px 0px 0px 20px;");
});
});
</script>
</head>
<body>
<div id="mydiv"> hello world ! </div>
</body>
<style>
#mydiv {
color: red;
}
</style>
</html>위의 코드를 보면 mydiv 부분의 hello world ! 부분을 클릭했을 때 실제로
height가 myHeight에 의해 설정되고 margin이 설정될 것이다.
var myHeight = $(window).height() + 'px';
$("#mydiv").attr("style", 'height: ' + myHeight + " important; margin: 10px 0px 0px 20px;");
하지만, 이때 color: red 부분은 의도치 않게 지워지게 된다.
그 이유는 attr 메서드에서 "style"를 강제로 변형시키려 했기 때문이다.
따라서 우리는 다른 방법이 필요할 것이고 attr 메서드 대신 Jquery의 css 메서드를 선택하려 할 것이다.
하지만, css 메서드에서는 !important 속성을 쓸 수 없기에 혹시 !important가 필요한 상황에서는 또 불편한 요소가 되기 마련이다.
이때 해결할 수 있는 좋은 방법이 있는데 이는
javascript의 style.setProperty 메서드를 이용하는 것이다.
document.querySelector('#mydiv').style.setProperty('height', myHeight, 'important');https://www.w3schools.com/jsref/met_document_queryselector.asp
HTML DOM querySelector() Method
HTML DOM querySelector() Method ❮ Document Object Example Get the first element in the document with class="example": document.querySelector(".example"); Try it Yourself » More "Try it Yourself" examples below. Definition and Usage The querySelector() meth
www.w3schools.com
https://www.w3schools.com/jsref/met_cssstyle_setproperty.asp
CSSStyleDeclaration setProperty Method
CSSStyleDeclaration setProperty() Method ❮ CSSStyleDeclaration Object Example Set a new CSS property: var declaration = document.styleSheets[0].cssRules[0].style; var setprop = declaration.setProperty("background-color", "yellow"); Try it Yourself » Defini
www.w3schools.com
이를 이용한 코드 및 결과 화면은 아래와 같다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#mydiv").click(function(){
var myHeight = $(window).height() + 'px';
document.querySelector("#mydiv").style.setProperty('height', myHeight, 'important');
document.querySelector("#mydiv").style.setProperty('margin', '10px 0px 0px 20px');
});
});
</script>
</head>
<body>
<div id="mydiv"> hello world ! </div>
</body>
<style>
#mydiv {
color: red;
}
</style>
</html>
이런 식으로 setProperty를 이용하면 이전에 존재하던 style를 방해하지 않고 새로운 속성만 수정/추가 할 수 있다.
'Basic > Jquery' 카테고리의 다른 글
| Tistory 메뉴에서 구분자 만들기 (0) | 2019.11.08 |
|---|---|
| Jquery를 이용한 특정 href 속성을 가진 element 찾기 (0) | 2019.11.04 |
| jquery를 이용한 slider (0) | 2018.08.21 |
| Jquery를 이용한 show, hide, toggle (0) | 2018.08.16 |
| Jquery를 이용한 ajax get post (0) | 2018.08.15 |