2009-11-17 6 views
2

질문에서 알 수 있듯이 CSS 파일 안에 JQuery 스크립트를 표현식으로 추가 할 수 있습니까? 또는 이와 비슷한 것 :CSS 파일에 JQuery 표현식을 포함 시키시겠습니까?

.parent{ 
    background-color: pink; 
    position:relative; 
    width: 100%; 
} 

.child{ 
    position: absolute; 
    background: transparent url('./background.gif') no-repeat top right; 
    /*height: 100%;*/ 
    height: expression($(this).parent.height()+'px'); 
    width: 12px; 

} 

이 스크립트의 전체 아이디어는 IE6에서 100 % div 높이를 해결하는 것입니다.

답변

3

이렇게하면 안됩니다.

당신은 자바 스크립트의 어떤 종류를 수행 할 수

페이지가로드 될 때 (100 % 높이 요소를 찾습니다 부모의 높이가 대체하는 함수입니다.) 내가 시도하는 모든 브라우저에

+0

그래서 해결할 방법이 있습니까? – Affar

+0

내가 말했듯이, 당신은 (또는 그 동안 자바 스크립트를 수행 할 수 있지만 추천하지는 않는다) 페이지가로드되었다. jQuery에 내장 된 함수가 있는지 여부는 알 수 없지만 개인적으로이 함수를 사용합니다. http://simonwillison.net/2004/May/26/addLoadEvent/. 그런 다음 모든 .child 요소에 작성한 함수를 수행하십시오. (jQuery에서 $ ('. child')를 사용하여 이러한 요소를 얻을 수 있다고 생각한다.) –

0

하지; IE 6에서 작동 할 수도있는 CSS expressions이 있지만 속도가 정확하지는 않습니다 (링크 참조). 문제는 jQuery 선택기가 초기화 될 때 CSS가로드 될 때라고 생각합니다. 따라서 DOM 준비 코드를 작성하여 높이가 필요한 모든 요소를 ​​선택하고 설정해야합니다.

0
#element { 
    height: expression((function(element) { 
       var x = window.setInterval (function() { 
        if (document.readyState.search (/loaded|complete/) > -1) { 
         window.clearTimeout (x); 
         $(element).height($(element).parent.height()) 
        } 
        }, 50); 
      })(this)); 
} 

는 설명해 드리죠 : 첫째, 표현은 나쁜. dlablin의 링크를 따라 이유를 읽으십시오. 다른 방법을 고려해야합니다. 위의 코드 조각은 다음과 같이 작동합니다.

  1. 표현식은 CSS를 읽 자 마자 먼저 평가됩니다. 즉, DOM이 아직 준비되지 않았고 jQuery가 아직로드되지 않았다는 의미입니다.

  2. 표현식을 익명의 함수로 설정하면 즉각 실행됩니다.

  3. 이 함수는 현재 요소를 포함 코드에 element으로 전달합니다.

  4. 간격을 설정했습니다. DOM이 준비되면 50ms마다 확인하십시오. 그렇다면 간격을 지우고 jQuery를 실행하십시오.

비고 : 당신이 많은 요소이 작업을 수행하는 경우, 이것은 정말 당신의 페이지를 느리게합니다. 이것을 다시 강조하기 위해 : 집에서 이것을하지 마십시오!

관련 문제