JQuery를 사용하여 요소에 테두리가 있는지 확인하십시오.

그래서 나는 요소가 테두리를 가지고 있는지 확인하려고 시도하여 $(el).css()을 가지고 놀고 있습니다.JQuery를 사용하여 요소에 테두리가 있는지 확인하십시오.

if ($(el).css("border-right-style") == "solid" && $(el).css("border-left-style") == "solid" && ...) {}

: I 작동 경계를 설정 .css("border-style", "solid")를 사용하지만, 실제로는 4 개 개인 스타일 설정 : 당신이 그런 짓을 할 필요가 그래서

border-right-style 
border-left-style 
border-top-style 
border-bottom-style

를, 테두리를 확인하는 것은 조금 복잡

border-style은 항상 ""와 동일하므로 $(el).css("border-style") != "" 만 확인하면 작동하지 않습니다.

더 세련된 방법이 있습니까?

출처

2012-01-17 Tony R

왜 수업을 사용하지 않습니까? – jcvegan

나는 보통 그렇지만이 특별한 경우에는 스타일이 너무 동적이어서 각 요소마다 매우 독특하므로 이렇게하는 것이 더 쉽습니다. –

border-style는 속기 내가 그것을 할 수 있다면 모르겠어요으로 Jquery CSS documentation

Shorthand CSS properties (e.g. margin, background, border) are not supported. 
For example, if you want to retrieve the rendered margin, 
use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.

출처

2012-01-17 18:49:49

와우. 그래서 공식입니다! 고마워, 설명해. –

네 가지 속성이 모두 설정되었는지 알고 싶다면 네 가지 속성을 확인해야합니다. 비록 내가 선택기를 캐시 것이지만.

$el = $('a'); 
if ($el.css("border-right-style") == "solid" && $el.css("border-left-style") == "solid" && $el.css("border-top-style") == "solid" && $el.css("border-bottom-style") == "solid") 
{ 
    alert('yay'); 
}

jsFiddle

출처

2012-01-17 18:43:58 Sinetheta

그래서 내가 가진 질문은 "테두리 스타일"이 CSS에도 실제로 존재합니까? 아니면 다른 4 개의 지름길일까요? –

후자 인 border-style은 4 개의 속성을 설정합니다. 디버거 도구를 사용하여 검사하는 경우 대개 "계산 된 스타일"옵션이있어 모든 것을 표시합니다. 단일 선 테두리 : 1 픽셀 청색은 12 개의 속성을 설정합니다. – Sinetheta

당 때문에, separatly을 얻을 그래서 당신은 그들을 함께 캔트 너가하는 것을해라. DOM은 인라인 또는 스크립트의 요소에 할당 된 요소의 스타일 만 제공합니다. CSS 선언에서 테두리와 같은 스타일을 상속 받았는지 여부는 표시되지 않습니다.

출처

2012-01-17 18:53:45 pseudosavant

당신은 여전히 특성을 테스트해야하지만이 조금 더 추상적 할 수 있습니다 ...

function check(sel, prop) { 
    var i, property, $o = $(sel), directions = ["left", "right", "top", "bottom"]; 

    for (i = 0; i < directions.length; i++) { 
     property = $o.css(prop + '-' + directions[i] + '-style'); 
     if (property !== 'solid') { 
      return false; 
     } 
    } 

    return true; 
}

출처

2012-01-17 18:55:01 lsoliveira

나는 이것에 대해 생각했지만 읽는 것이 더 어렵습니다. –

약간의 변경으로 jQuery 플러그인을 만들고 속성 이름을 추상화하여 다른 속기 속성 값을 테스트하기 위해 재사용 할 수 있습니다. 메서드의 가독성을 떨어 뜨리지 만 전반적인 가독성을 높입니다 ('$ ''p '). checkProperty ('margin ','5px ')'). – lsoliveira

그것은 상속 CSS 파일에서 스타일 값을 표시 할 수 있습니다

....

경고 ($ ("selector") .css ("border-bottom-color"));

출처

2013-07-22 15:44:01

JQuery를 사용하여 요소에 테두리가 있는지 확인하십시오.

답변

관련 문제