CSS를 동적 생성 클래스에 할당할 수 있습니까? 그래 우리는 할 수있어
2514 단어 javascriptcsshtml
예, CSS만 사용하면 가능하며 3가지 방법이 있습니다.
옵션 #1 - 접두사 값으로 일치
클래스 앞에 "form-"이 붙은 모든 요소를 선택하는 CSS 클래스 선택기 ^="class"를 사용하십시오.
예시
[class^="form-"] {
background: red;
height: 100px;
width: 100px;
margin: 10px 0;
display:block
}
<div class="box-123"></div>
<span class="box-124"></span>
<article class="box-125"></article>
옵션 #2 - 하나 이상의 값을 포함하는 일치 기준
다른 CSS 클래스 선택기 *="class"(CSS 속성 선택기와 동일)를 사용하여 해당 클래스에 하나 이상의 하위 문자열 "form-"이 포함된 모든 요소를 선택합니다.
[class*="form-"] {
background: red;
height: 100px;
width: 100px;
margin: 10px 0;
display:block
}
<div class="form-123"></div>
<span class="form-124"></span>
<article class="form-125"></article>
옵션 #3 - 추가 클래스를 요소에 추가하면 두 요소 모두 클래스의 CSS 속성을 갖게 됩니다.
.form-123 {
background: blue;
height: 100px;
width: 100px;
margin: 10px 0;
display:block
}
extra-class {
background: blue !important;
}
Reference
이 문제에 관하여(CSS를 동적 생성 클래스에 할당할 수 있습니까? 그래 우리는 할 수있어), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jadzeino/can-we-assign-css-to-dynamic-generated-classes-yes-we-can-3bo9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)