[css] CSS에서 “XYZ”에 대한 레이블을 선택하는 방법은 무엇입니까?

Program / 글쓴이

HTML :

<label for="email">{t _your_email}:</label>

CSS :

label {
  display: block;
  width: 156px;
  cursor: pointer;
  padding-right: 6px;
  padding-bottom: 1px;
}

레이아웃 변경을 위해 ‘for’속성을 기반으로 레이블을 선택하고 싶습니다.

답변

label[for=email]CSS에서 선택자는 다음과 같습니다.

label[for=email]
{
    /* ...definitions here... */
}

… 또는 DOM을 사용하는 JavaScript에서 :

var element = document.querySelector("label[for=email]");

… 또는 jQuery를 사용하는 JavaScript에서 :

var element = $("label[for=email]");

그것은의 속성 선택 . 일부 브라우저 (예 : IE <8 버전)는 속성 선택기를 지원하지 않지만 최신 브라우저는 지원합니다. IE6 및 IE7과 같은 오래된 브라우저를 지원하려면 슬프게도 클래스 (잘 또는 다른 구조적 방법)를 사용해야합니다.

(템플릿 {t _your_email}이 필드를 필드로 채울 것이라고 가정합니다 id="email". 그렇지 않으면 클래스를 대신 사용하십시오.)

선택하는 속성 값이 CSS 식별자 규칙에 맞지 않는 경우 (예 : 공백이나 괄호가 있거나 숫자로 시작하는 등) 인용 부호가 필요합니다. 값:

label[for="field[]"]
{
    /* ...definitions here... */
}

그들은 단일 또는 이중 따옴표 수 있습니다 .

답변

내용이 변수 인 경우 따옴표로 묶어야합니다. 그것은 나를 위해 일했다. 이처럼 :

itemSelected (id : 숫자) {
    console.log ( 'label contains', document.querySelector ( "label [for = '"+ id + "']"));
}

답변