2011-10-23 4 views
3

그래서 jQuery에 익숙해 지려고 노력 중입니다. 그래서 일부 테스트 코드를 실행했지만 jQuery의 .css에 문제가있는 것 같습니다. 나는 지난 3 시간 동안 다른 물건을 시험해 보았다. .. 가지 마라. 내 div가 클래스 콘텐츠를 갖도록 설정 한 다음 페이지를 실행하고 크기를 조정하여 함수를 트리거합니다. 콘솔에서jQuery에서 div CSS 속성을 가져올 수 없습니까?

.Content { 
    border-top-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-right-width: 1px; 
    padding-top-width:1px; 
    padding: 1px; 
}; 

    <div id="wrapper" class="fullscreen"> 
    <div id="divContainer" class="Container"> 
     <div id="divContent" class="Content"> Content </div> 
     <div id="divQuery" class="Query"> Query </div> 
    </div> 
    </div> 

$(window).resize(function() { 
    var container = $('#divContainer'); 
    var content = $('#divContent'); 
    console.log(content.css('border-left-width')); 
    console.log(content.css('padding-top-width')); 
    //content.width(container.width()*.6-content.attr('padding')); 
}); 

, 나는 다음과 같은 얻을 :

내가 잘못 뭐하는 거지
0px 
(an empty string) 

?

답변

4

여기에 두 가지 문제가 있습니다 : this.style.padding-left-widththis.style.padding

에서 leftwidth의 뺄셈을 의미하기 때문에 비 jQuery를 JS 측면에서 this.style.paddingLeftWidth 그래서 시도를 사용

  1. padding-top-width이해야 단지 padding-top이어야합니다. 당신이 border-style (예를 들어, "고체")를 가지지 않는

  2. border-top-width

    이 작동하지 않습니다 - 그렇지 않으면, "없음"은없는 즉 테두리를 가정하지 않으며, 당신의 border-width 선언은 아무런 영향을 미치지입니다.

실무 예제는 http://jsfiddle.net/nrabinowitz/D2e4N/5/을 참조하십시오.

+0

네가 nrabinowitz에게 고맙다. 너와 Cubed Eye의 제안을 모두 시도해 보았다. – codenamezero

1

하이퍼 링크 된 CSS 속성은 JavaScript의 camelCase입니다.

그래서 borderLeftWidth 및 paddingLeftWidth입니다. 이는 -에서 JS의 빼기 기호로 사용되기 때문입니다.

console.log(content.css('borderLeftWidth'));

+0

똑같은 Javascript에 대해서는 좋은 답변이지만 여기서는 문제가 아닙니다. jQuery가 두 가지 형식을 모두 허용한다고 생각합니다. http://jsfiddle.net/nrabinowitz/D2e4N/1/ – nrabinowitz

+0

@nrabinowitz를 참조하십시오. 올바른지, 아니면 문서를 확인했는지 ... –

+0

Cubed Eye에 감사드립니다. 코드도 잘 작동했습니다. 그러나 nrabinowitz가 말했듯이 jQuery는 다음과 같은 작업을 수행 한 후에도 "-"을 처리했습니다. console.log (content.css ('padding-top')); – codenamezero

관련 문제