2017-03-10 9 views
4

내가 무시되는 요소의 CSS 속성, 예를 들어 목록을 얻기 위해 노력하고 있어요 :에만 CSS 재정의 속성 자바 스크립트/jQuery를 얻을하는 방법

.div{ 
    position:absolute; 
    top:10px; 
} 

우리는이 코드를 사용하는 경우 :

jQuery('.div').css('bottom'); 

내가 얻을 :

bottom:-10px; 

내가 계산 얻을 사용하거나 jquery.css 나도 같은 결과를 얻을 수 있지만, 사실은 내가 가져올 경우

empty or null 

내가 무시/지정하지 않았기 때문에. 이 예에서 예상

값 : 상단 : 10px 바닥 : 자동 또는 null 또는 다시 아무것도

https://codepen.io/anon/pen/dvvdVv

, 나는 단지 오버라이드 (override) 된 속성을 원했다.

===================== 편집 ====================== 내가 원하는 이제

.giveItSomeTop{ 
    top:10px; 
} 

: 만 top를 지정

<div id='box' class='giveItSomeTop' style="top:10px"></div> 

및 요소의 CSS,주의 :

내 목표는 다음과 같은 요소에서 값 top,bottom을 얻을 아니라 최고의 가치를 얻으려면 및 하단 값. 내가 할 경우 10px 하지만 내가 할 때 :

$('#box').css('top'); 

을 결과는

$('#box').css('bottom'); 

를 내가 가야 할 때 나는 empty, nothing, null 또는 ''

+1

당신은 할 수 없습니다 .. 당신이'.css (x)'를 질의 할 때 그것은 css 파일을 분석하려고하지 않습니다 ... 그것은 당신이 찾고있는 것입니다. 문서를 살펴보면'계산 된 스타일 속성의 값을 얻으십시오'라고 쓰여 있습니다 : https://api.jquery.com/css/ CSS 파일 파서를 작성해야합니다. – Pogrindis

+0

이렇게 생각했습니다. 그것은 정확히 우리가 한 일입니다. 그러나 더 좋은 방법이 될 수 있습니다. ( –

답변

1

그것을 700px를 얻을 수 당신이 거기에있어 정말 까다로운 건 내 유일한 제안은 여기에있다 :

상단/b 설정 ottom을 네이티브 javascript와 함께 사용하면 top = 10px로 설정하면 element.style.top == 10px가되고,이 속성을 설정하지 않으면 ""이됩니다.

내가 여기 있지 최적의 솔루션을 예를 추가하지만 어쩌면 그것은 도움 :

$(document).ready(function() { 
 
    var box = document.getElementById("box"); 
 
    
 
    // Set it like this 
 
    var top = box.style.top = "20px"; 
 
    var bottom = box.style.bottom; 
 
    
 
    // And you get 20px 
 
    $('#top').text(top); 
 
    
 
    // If unset you get "" 
 
    $('#bottom').text(bottom); 
 
    
 
    console.log(top); 
 
});
#box { 
 
    position: absolute; 
 
    width:30px; 
 
    height:30px; 
 
    background-color:red; 
 
    top:10px; 
 
} 
 

 
p { 
 
    position:relative; 
 
    top:40px; 
 
    font-size:12px; 
 
    color:black; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='box'></div> 
 
<p id='top'></p> 
 
<p id='bottom'></p>

+0

나는 CSS를 어떻게 설정하는지 제어하지 않기 때문에 대답을하지 못했습니다.이 프로젝트의 요소를 무시하는 5 개의 CSS 파일이 있습니다. –

1

을 불행하게도 당신이 그것을 의도 어떻게 jQuery를 css() 방법을 사용하고 있지 않습니다.

https://api.jquery.com/css/

는 에서 유사한 요소의 집합을 상기 제 성분에 대한 계산 된 스타일 속성 값을 받거나 모든 유사한 요소에 대해 하나 개 이상의 CSS 속성을 설정. 이 의미

, 그것은 CSS 파일이이 요소에 적용되는 것을, 그것은 단지 당신이 요소에 을 찾아 그것을 요구 한 내용을 찾을 것이다 상관하지 않는다.

당신이해야 할 일은 CSS 파일 파서를 작성한 다음 그로부터 쿼리하는 것입니다.하지만 구현할 필요가있는 또 다른 툴/라이브러리입니다. | Convert CSS text to JavaScript object

여기에서 당신이 null 주어집니다 : Parsing CSS in JavaScript/jQuery

및/또는 :

는 그리고에 StackOverflow에 이러한 도구에 대한 답이있다 undefined 존재하지 않는 개체 속성