여러 미리 정의 된 스타일이나 동적으로 인라인 스타일을 변경합니까?

나는 카드 놀이를위한 맞춤식 요소를 만들고 있습니다. SVG 이미지를 배경으로 사용하고 양복이나 순위 속성이 변경 될 때마다 배경 이미지를 변경하고 싶습니다.여러 미리 정의 된 스타일이나 동적으로 인라인 스타일을 변경합니까?

는 지금까지 내가 그렇게하는 방법은 두 가지가 있습니다 알고 - 하나는 "attributeChangedCallback"방법을 사용하는 것입니다

static get observedAttributes() {return ["suit", "rank"];} 
attributeChangedCallback(name, oldValue, newValue) { 
    this.style.backgroundImage = `url(...)`; 
}

을하고 다른 하나는 CSS의 많은 속성 선택기하는 것입니다 :

을

:host([suit="clubs"][rank="4"]) { 
    background-image: url(...); 
} 
:host([suit="clubs"][rank="5"]) { 
    background-image: url(...); 
} 
...

둘 다 작동하지만 JS 방식은 인라인 스타일을 추가하여 CSS 방식이 매우 큰 것을 방지하고 싶습니다. 고려해야 할 큰 성능 차이가 있습니까?

출처

2017-03-19 Septatrix

참고로 인라인 스타일이 효율적입니다. 그들은 HTML 페이지를 유지하기가 더 어렵게 만들 수 있기 때문에 눈살을 찌푸리게됩니다. JS를 사용할 때 효율적이기 때문에 눈살을 찌푸리지 않습니다. 이 경우 어떤 옵션을 선택하면 코드를 유지 관리하기가 쉬워 질지 선택하십시오. 개인적으로 JS를 여기에서 선택합니다. –

성능 차이가 크거나 동일한 페이지에 수백 또는 수천 개의 사용자 지정 요소가있는 경우에만 사용해야합니다.

후자의 경우 작동 조건에서 두 솔루션을 모두 테스트 한 다음 더 나은 것을 선택해야합니다.

그렇지 않은 경우 프로젝트 관리 방법에 따라 달라집니다 : CSS와 JS 파일을 유지 관리하는 팀과 동일한 팀입니까?

출처

2017-03-19 23:23:59 Supersharp

여러 미리 정의 된 스타일이나 동적으로 인라인 스타일을 변경합니까?

답변

관련 문제