값없이 속성 설정

194

jQuery에 값을 추가하지 않고 데이터 속성을 어떻게 설정합니까? 나는 이것을 원한다 :

<body data-body>

나는 시도했다 :

$('body').attr('data-body'); // this is a getter, not working
$('body').attr('data-body', null); // not adding anything

다른 모든 것은 두 번째 인수를 문자열로 추가하는 것 같습니다. 값없이 속성을 설정할 수 있습니까?

— 데이비드 헬스 싱
소스

3

왜 data-body대가 필요 data-body=""합니까?

— 폭발 약

최소한 XHTML을 사용하려면 속성 최소화 가 허용 되지 않으므로 그렇게하지 않아야합니다 .

— Matthias

9

XHTML을 사용하지 않고 HTML5를 사용합니다

— David Hellsing

2

생성 된 HTML을 문자열로 저장하고 나중에 역방향 조회를 수행해야하기 때문에 @ user1689607.

— David Hellsing

4

@ExplosionPills 한 가지 예는 requiredHTML5 양식 유효성 검사 의 속성입니다. 다른 유효한 사용 사례가 많이 있다고 확신합니다.

— Zero3

251

이 attr()기능은 세터 기능이기도합니다. 빈 문자열을 전달할 수 있습니다.

$('body').attr('data-body','');

빈 문자열은 단순히 값이없는 속성을 만듭니다.

<body data-body>

참조-http: //api.jquery.com/attr/#attr-attributeName-value

attr (attributeName, value)

— 릭스
소스

24

+1이지만 OP는 세터라는 것을 알고 있습니다. 빈 문자열을 전달하는 null것은 효과가 있지만 다소 놀라운 것은 아닙니다.

— Jon

2

Javasctipt에는 이상한 동작이 있습니다. 이러한 이상이 어디에서 발생하는지 알면 놀람의 요소가 제거 될 것입니다. : P

— Lix

25

참고 : jQuery 1.7.2에서는 작동하지 않지만 (최신 버전은 아닙니다) data-body = "data-body"설정 $(el).prop('data-body', true)이 $(el).attr('data-body', '')끝났을 때 사용 했습니다 .

— 패트릭 오 도허티

6

@ PatrickO'Doherty $(el).prop('data-body', true)는 나를 위해 작동하지 않습니다. attr()작동하지만 추가하려는 속성 값으로 빈 문자열을 추가합니다.

— Webdevotion

1

@Andrew removeAttr / prop 함수를 찾고 있다고 생각합니다 . 제거하려는 속성에 따라 다릅니다.

— Lix

47

아마도 시도해보십시오 :

var body = document.getElementsByTagName('body')[0];
body.setAttribute("data-body","");

— 캘럼 맥린
소스

2

이 솔루션 만이 저에게 var btn = $(this).get(0); btn.setAttribute("disabled","");

— 효과적

1

여기에있는 다른 모든 솔루션과 의견에서 제안한 것처럼 .attr 및 .prop로 엉망이 된 후에 마침내 네이티브 JS로 되돌아 가거나 (또는 적어도 "반쯤"뒤로) 네이티브 트릭으로 제안 된 트릭을 발견했습니다. 위의 의견 ... 건배!

— TheCuBeMan

22

허용 대답은하지 않습니다 (9 월 2017로) 더 이상 이름 전용 속성을 만들 수 있습니다.

이름 전용 속성을 작성 하려면 JQuery prop () 메소드를 사용해야 합니다.

$(body).prop('data-body', true)

— 야경
소스

실제로 "value"대신 "select = 'true'"를 선택 옵션에 추가 한 것으로 보입니다. 어.

— RonLugge

나는 수용 된 답변 에이 솔루션이 어떻게 포함되어 있지 않은지 궁금했습니다! jquery를 사용하는 가장 깨끗한 방법입니다.

— denns

불행히도 Chrome의 선택 드롭 다운 옵션에서 작동하지 않음

— MC9000

7

jQuery없이 할 수 있습니다!

예:

document.querySelector('button').setAttribute('disabled', '');

<button>My disabled button!</button>

스 니펫 확장

사용 안함과 같은 부울 속성 값을 설정하려면 임의의 값을 지정할 수 있습니다. 빈 문자열 또는 속성 이름이 권장되는 값입니다. 중요한 것은 속성이 실제 값에 관계없이 존재한다면 그 값은 참으로 간주된다는 것입니다. 속성이 없으면 값이 false임을 의미합니다. disabled 속성 값을 빈 문자열 ( "")로 설정하면 disabled를 true로 설정하여 버튼이 비활성화됩니다.

에서 MDN Element.setAttribute ()

— 입술
소스

1

jQuery는 이와 관련하여 너무 잘못되었습니다. jquery 또는 브라우저가 변경 될 때마다 자신을 미치게하지 않도록 자바 스크립트에서하는 것이 가장 좋습니다. 이것은 모든 버그가있는 클라이언트 프레임 워크에 적용됩니다.

— MC9000

1

이것이 실제로 유익한 지 또는 왜이 스타일을 선호하는지 모르겠지만 (바닐라 js에서) 내가하는 일은 다음과 같습니다.

document.querySelector('#selector').toggleAttribute('data-something');

이렇게하면 값없이 모든 소문자로 속성을 추가하거나 요소에 이미 존재하는 경우 제거합니다.

https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute

— 브렌트 엔
소스