[JQUERY] 개발자가 CSS로 지정한 내용에 따라 퍼센트 또는 픽셀 단위 요소의 폭을 얻기 위해 jQuery를 사용하는 것이 가능?

개발자가 CSS로 지정한 내용에 따라 퍼센트 또는 픽셀 단위 요소의 폭을 얻기 위해 jQuery를 사용하는 것이 가능?

해결법

1. ---

   1.나는 가장 좋은 방법은 스스로를 계산하는 것이다라고 말하고 싶지만 :

   나는 가장 좋은 방법은 스스로를 계산하는 것이다라고 말하고 싶지만 :

   var width = $('#someElt').width();
   var parentWidth = $('#someElt').offsetParent().width();
   var percent = 100*width/parentWidth;
   

2. ---

   2.그것은 가장 확실히 가능하다!

   그것은 가장 확실히 가능하다!

   당신은 반드시 먼저 숨기기 () 부모 요소입니다. 이 자식 요소에 대해 픽셀을 계산에서 자바 스크립트를 방지 할 수 있습니다.

   $('.parent').hide();
   var width = $('.child').width();
   $('.parent').show();
   alert(width);
   

   내 예를 참조하십시오.

3. ---

   3.난 당신이 직접 스타일 시트 ( '스타일') 오브젝트 액세스를 사용할 수 있다고 생각합니다. 그렇다하더라도, 브라우저에 의해 YMMV. 예를 들면 elm.style.width.

   난 당신이 직접 스타일 시트 ( '스타일') 오브젝트 액세스를 사용할 수 있다고 생각합니다. 그렇다하더라도, 브라우저에 의해 YMMV. 예를 들면 elm.style.width.

   피터의 코멘트 편집 :: I '는 % 할인'을 찾고 있지 않다. 질문에 따라 :

   따라서 나는 "원시"CSS 값을 검색 할 수있는 대안을 제공했다. 이 FF3.6에 작업에 나타납니다. YMMV 다른 곳 (netadictos의 대답은 더 휴대용 / 보편적 될 수있다, 나도 몰라). 다시 말하지만, 그것은 '는 % 할인'을 찾고되지 않습니다.

4. ---

   4.그것을 할 방법이 유래 질문에 설명되어 있습니다.

   그것을 할 방법이 유래 질문에 설명되어 있습니다.

   어떻게 자바 스크립트와 CSS 규칙 값을 읽습니까?

   당신이 알고있는 유일한 것은있는 스타일은 모든 스타일 시트를 통해 클래스 또는 루프입니다. 다음 함수는 당신에게 클래스의 모든 기능을 제공합니다, 당신이 찾는 기능을 추출하는 정규식을 쉽게 할 수있을 것이다.

   function getStyle(className) {
       var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
       for(var x=0;x<classes.length;x++) {
   
           if(classes[x].selectorText==className) {
                   (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
           }
       }
   }
   getStyle('.test');
   

5. ---

   5.내 목적을 위해 나는 MДΓΓ БДLL의 대답 떨어져 추정.

   내 목적을 위해 나는 MДΓΓ БДLL의 대답 떨어져 추정.

   난 단지 전체 비율로 일하고 있어요, 명심하십시오.

       var getPercent = function(elem){
           var elemName = elem.attr("id");
           var width = elem.width();
           var parentWidth = elem.offsetParent().width();
           var percent = Math.round(100*width/parentWidth);
           console.log(elemName+"'s width = "+percent+"%");
       }
   
       getPercent($('#folders'));
       getPercent($('#media'));
       getPercent($('#player'));
   

6. ---

   6.새 비율을 원래 요소의 비율을 재 할당 찾고 있다면, 그것은 CSS에서 그 값을 정의하고 요소가 새로운 CSS 정의를 반영 할 수있는 방법 (클래스, ID 등)에가 identifier 수정하는 것이 좋습니다. 새로운 비율 변수가 변수가 될 필요가있는 경우이 항상 적용되지 않습니다.

   새 비율을 원래 요소의 비율을 재 할당 찾고 있다면, 그것은 CSS에서 그 값을 정의하고 요소가 새로운 CSS 정의를 반영 할 수있는 방법 (클래스, ID 등)에가 identifier 수정하는 것이 좋습니다. 새로운 비율 변수가 변수가 될 필요가있는 경우이 항상 적용되지 않습니다.

   .myClass{
       width:50%;
   }
   
   .myNewClass{
       width:35%;
   }
   

   A 본 (또는 다른) 방법을 통해 제거 추가 :

   $('.myClass').removeClass('myClass').addClass('myNewClass');
   

7. ---

   7.그냥 더 jqueryish 만들려면

   그냥 더 jqueryish 만들려면

   이거 추가 해봐

   $.fn.percWidth = function(){
     return this.outerWidth() / this.parent().outerWidth() * 100;
   }
   

   다음 사용

   $(selector).percWidth()
   

   이것은 % 기호없이 백분율 값을 반환합니다, 그래서 당신은 계산에 사용할 수 있습니다

8. ---

   8.그것의 세트 스타일의 태그를 사용하는 경우, 당신은 단순히) (.prop 사용할 수 있습니다 예를 들면 $ ( '. 선택'). 소품 ( '스타일'). width.replace ( '%', '')

   그것의 세트 스타일의 태그를 사용하는 경우, 당신은 단순히) (.prop 사용할 수 있습니다 예를 들면 $ ( '. 선택'). 소품 ( '스타일'). width.replace ( '%', '')

9. ---

   9.나는 최근에뿐만 아니라이 문제를 만났고, 정말 부모의 폭을 얻고 비율을 계산 한 "추가"일을하고 싶지 않았다.

   나는 최근에뿐만 아니라이 문제를 만났고, 정말 부모의 폭을 얻고 비율을 계산 한 "추가"일을하고 싶지 않았다.

   몇 가지 간단한 시도 후, 이것은 내가 가지고 무엇을 :

       $($($(table).find('tr')[0]).find('td')).each(function (i, e) {
           var proptW = $(e).prop("style").width;
           console.log(proptW);
       });
   

   그래서, 나는이 개발자가 CSS에 명시된 내용에 따라 요소의 폭의 값을 얻기 위해 jQuery를 사용하는 가장 가까운 방법이라고 생각합니다.

   당신이 볼 수 있듯이, 나는 테이블을 가지고 있고 나는 각 컬럼의 폭을 검색해야합니다.

   우리는 직접 jQuery를 방법과 개발자 지정된 값 (DSV)을 얻을 수 있지만, 자바 스크립트와 결합 후 내장 된 방법은 멀리 DSV를 받고에서 한 걸음 수 없습니다.

   DSV 값 스타일에 우리가 jQuery를 방법을 사용할 수 있도록 스타일, 요소의 속성이므로 : 소품 ()을 얻을 수 있습니다. 이 방법은 우리가 직접 DSV를 얻을 수 sty.width를 호출 할 수 있습니다 그래서, 스타일 오브젝트 (말의 촌)을 반환합니다.

   이 그것을 얻을 수있는 순수의 jQuery 방법은 아니지만 간단한 충분히 나를위한 작품이다.

from https://stackoverflow.com/questions/4006588/is-it-possible-to-use-jquery-to-get-the-width-of-an-element-in-percent-or-pixels by cc-by-sa and MIT license