특정 스타일을 가진 CSS 클래스를 찾으십시오.

-2

바닐라 js 또는 jquery를 사용하여 정의 된 일부 스타일 속성 (값은 무엇인지)이 정의 된 (사용 가능한) 모든 클래스를 알고 싶습니다.특정 스타일을 가진 CSS 클래스를 찾으십시오.

예를 들어, border 스타일이 정의되어 있고 정의 된 모든 클래스를 알고 싶습니다. 그 클래스를 수정할 수 있다면 (예 : 경계를 변경하거나 삭제할 수 있습니다.) 푸시가 발생하면 해당 클래스를 사용하는 모든 요소를 쿼리 할 수 있으며 선택한 클래스로 전환 할 수 있습니다 대신.

나는 인기있는 웹 사이트에서 스타일을 수정하는 확장 프로그램을 작성하려고합니다. 불행히도 모든 클래스 이름은 의미가 없으며 이름이 자주 바뀝니다 (클래스 이름은 모두 "클래스 [1..n]"입니다). 따라서 클래스 이름을 준 지능형 방법으로 특정 요소를 가져올 수는 없습니다. 오래된 수업을 끄고 새 맞춤 수업을 추가하십시오. 이 사이트는 인라인 스타일을 많이 사용하며, 내가 필요한 것 대부분을 얻을 수있었습니다. 그러나 클래스가 있습니다 (이름이 "class12"에서 "class26"로 변경됨).이 클래스는 테두리를 정의합니다. 나는 국경이 죽기를 바란다. 지금은 경계 내의 내용을 알아야하고 경계 클래스로 div를 삭제하기 위해 여러 단계로 올라야합니다. 매우 짜증나.

출처

2017-12-29 viggity

에서보세요? 실패한 소스를 제공 할 수 있습니까? 적어도 여기를 읽기 시작하십시오 : http://devdocs.io/dom/document/stylesheets – Intervalia

코드를 공유하고 해결책을 요청하십시오. –

대상 클래스가 항상 동일한 접두어를 사용하는 경우 (항상'classx'가'X'가 변수 인 경우), 그것을 필터링하는 것은 꽤 쉽습니다. 이제 변경되고 계산 된 스타일로 대신 필터링해야하는 경우 더 힘들어 실제 가치가 없습니다. 내 생각에 스타일별로 필터를 적용하는 것보다 이러한 특정 요소를 타겟팅하는 다른 방법을 찾는 것이 좋습니다. –

는 시도 무엇 getComputedStyle

const elem = document.querySelector('.test'); 
 
const style = getComputedStyle(elem); 
 

 
// READ 
 
console.log(style.border); 
 

 
// WRITE 
 
elem.style.border = '1px dotted green';

.test { 
 
    border: 5px solid red; 
 
}

<div class="test">TEST</div>

출처

2017-12-29 04:31:45 klugjo

특정 스타일을 가진 CSS 클래스를 찾으십시오.

답변

관련 문제