JaeYa Blog

외부 css에 정의된 스타일을 가져오기 위해

DOM으로 처리를 할려고 했지만 HTML 태그 내부 인라인으로 정의된 style만 접근이

가능하기 때문에 아래 코드를 쓰게 되면 값이 가져오지를 못한다.

document.getByElementById("font1").style.fontSize

왜?? id가 "font1"이라는 div 태그안에는 style이 직접적으로 정의가 되어있지 않기 때문이다.

 

그래서 jQuery를 이용해서 객체를 생성하고 css의 값을 가져오도록 했다.

물론 Javascript로 할 순 있지만 코드만 길어지고 정신적인 스트레스가 올 것 같다.

아래 코드는 "+" 버튼을 클릭하면 div 내부의 현재 font-size에서 5px 증가한 값으로 변환시키고, "-" 버튼을 클릭하면 5px 감소한 값으로 변환시킨다.

 

HEADER

<link rel="stylesheet" type="text/css" href="common.css" />                                    

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
        $(function () {
            var div = $("div");

            $("#btnIncrease").click(function () {
                div.css("font-size", "+=5");
            });

            $("#btnDecrease").click(function () {
                div.css("font-size", "-=5");
            });

        });
</script>

 

CSS (외부 파일 common.css)

.font1 { font-size:11px; }
.font2 { font-size:20px; }

 

HTML

<input type="button" id="btnIncrease" value="+" />
<input type="button" id="btnDecrease" value="-" />
<div id="font1" class="font1">테스트1</div>
<div id="font2" class="font2">테스트2</div>

요즘 웹개발 하시는 분 대부분이 jQuery를 많이 사용하고 계실겁니다.

저두 그렇구요^^

오늘 이 녀석 때문에 3시간 동안 삽질의 삽질을 했네요.

바로 문제의 부분은

<script href="common/jquery.1.4.1.min.js" type="text/javascript" />

뭐가 문제 일까요??

전 이렇게 선언을 하고 그 밑에

<script type="text/javascript">
        function methodCall()
        {
             alert("test");
         }
</script>

스크립트 호출문을 추가를 했지만

해당 페이지를 실행 시키면 methodCall()이란 함수가 정의가 되지 않았다는 스크립트 

오류만 뱉어내더군요. 므냐~!!

그렇게 스크립트 디버깅을 IE, FF 왔다갔다하면서 해봤지만 해결을 못했죠

결국 구글링~~~~~~~~~~~~~


앗!!! 충격적인 한마디

script tags can't be self-closing. You need a closing script tag:

What the.......!!!!!

이것은 
<script href="common/jquery.1.4.1.min.js" type="text/javascript"></script>

이렇게 해야지만 된다는거.... O.O

여태까지 난 jquery를 어떻게 쓰고 있었던거지..

아무튼 이 하나의 정보를 얻기 위해 근무시간 3시간을 날렸다 ㅡ _ㅡ 오호호호

야근 +3 추가요~!!!!!

jQuery를 이용하여 만든 Image Slide기능 스크립트

괜찮은 녀석임.!!

// Cross Browser Word Breaker with jQuery
// Usage : $('[search]').breakWords();
(function($) {
    $.fn.breakWords = function() {
        this.each(function() {
            if (this.nodeType !== 1) { return; }

            if (this.currentStyle && typeof this.currentStyle.wordBreak === 'string') {
                this.runtimeStyle.wordBreak = 'break-all';
            } else if (document.createTreeWalker) {
                var trim = function(str) {
                    str = str.replace(/^\s\s*/, '');
                    var ws = /\s/, i = str.length;
                    while (ws.test(str.charAt(--i)));
                    return str.slice(0, i + 1);
                };            //For Opera, Safari, and Firefox
                var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false);
                var node, s, c = String.fromCharCode('8203');
                while (dWalker.nextNode()) {
                    node = dWalker.currentNode;
                    s = trim(node.nodeValue).split('').join(c);
                    node.nodeValue = s;
                }
            }
        });
        return this;
    };
})(jQuery);

오호..이런 좋은게 있었다니..

반나절의 삽질을

췌길... Literal 이것때문에 뭔 고생이람..ㅡㅡ;;

스타일이 먹히지 않는다걸 생각도 못하고. 다시는 이거 안써!!

Label이 짱이야.ㅋㅋ

## 참고 : jQuery.js (1.3.2) 버전 이상 가능