jQuery를 사용하여 요소의 제목 속성을 변경하는 방법


226

양식 입력 요소가 있고 제목 속성을 변경하고 싶습니다. 이것은 파이처럼 쉬워야하지만 어떤 이유로 든이를 수행하는 방법을 찾을 수 없습니다. 이 작업은 어떻게 수행되며 어떻게 수행해야하는지 어디에서 어떻게 검색해야합니까?

답변:


463

코드를 작성하기 전에 속성과 속성의 차이점에 대해 설명하겠습니다. 속성은 HTML 마크 업의 요소에 적용하는 설정입니다 . 그런 다음 브라우저는 마크 업을 구문 분석 하고 속성 값으로 초기화 된 특성 을 포함하는 다양한 유형의 DOM 오브젝트를 작성 합니다. simple과 같은 DOM 객체에서는 속성 컬렉션이 아닌 속성을HTMLElement 사용하여 거의 항상 작업하려고합니다 .

현재 모범 사례는 속성이 사용자 정의이거나 해당 속성을 보완 할 수있는 속성이없는 경우가 아닌 속성 작업을 피하는 것입니다. 때문에 title실제로 읽기 / 쓰기로 존재 재산 많은에 HTMLElement들, 우리는 그것을 이용해야한다.

여기 또는 여기 에서 속성과 속성의 차이점에 대해 자세히 읽을 수 있습니다 .

이것을 염두에두고, 그것을 조작합시다 title...

jQuery 없이 요소의 title속성 가져 오기 또는 설정

title공용 속성 이므로 일반 JavaScript로 지원하는 모든 DOM 요소에 설정할 수 있습니다.

document.getElementById('yourElementId').title = 'your new title';

검색은 거의 동일합니다. 여기서 특별한 것은 없습니다.

var elementTitle = document.getElementById('yourElementId').title;

최적화 너트 인 경우 제목을 변경하는 가장 빠른 방법이지만 jQuery를 원했기 때문에 다음과 같습니다.

jQuery (v1.6 +)를 사용 하여 요소의 title 속성 가져 오기 또는 설정

jQuery는 속성을 가져오고 설정하기 위해 v1.6에서 새로운 메소드를 도입했습니다. title요소 의 속성 을 설정하려면 다음을 사용하십시오.

$('#yourElementId').prop('title', 'your new title');

제목을 검색하려면 두 번째 매개 변수를 생략하고 리턴 값을 캡처하십시오.

var elementTitle = $('#yourElementId').prop('title');

jQuery에 대한 prop()API 문서 를 확인하십시오 .

당신이 경우 정말 속성을 사용하지 않는, 또는 V1.6 이전의 jQuery 버전을 사용하고, 당신은에 읽어야합니다 :

jQuery를 사용 하여 요소의 title 속성 가져 오기 또는 설정 (버전 <1.6)

다음 코드를 사용하여 title 속성 을 변경할 수 있습니다 .

$('#yourElementId').attr('title', 'your new title');

또는 다음을 사용하여 검색하십시오.

var elementTitle = $('#yourElementId').attr('title');

jQuery에 대한 attr()API 문서 를 확인하십시오 .


5
이것이 잘 구성된 답변이 아니라면 아무도 없습니다. 그리고 그것은 잘 구성되어있는만큼 정확합니다. +1 ... (오, 그리고 당신의 이름은 굉장합니다. 왜냐하면 내 이름이기 때문에) : 철자가 동일합니다!)
VoidKing

@VoidKing : 나는 다시 방문하고 인기있는 답변을하는 경향이 있습니다 (몇 가지만 있습니다). 조사하거나 질문을 게시 할 때 찾을 수있는 모든 것을 제공하려고합니다. 나는 당신이 그것을 발견 기쁘다!
Cᴏʀʏ

@Cory 글쎄, 다른 것을 찾고있을 때 정직하게 말하면 (긴 샷이지만 기본 HTML 제목 상자의 스타일을 지정할 수있는 방법이 있는지 찾고있었습니다). 나는 찾고있는 것을 찾지 못했지만이 답변에 넣은 노력 (자원, 순수한 .js 및 jQuery 등을 보여주었습니다)에 정말로 감탄했습니다. 어쨌든, 좋은 대답!
VoidKing

@VoidKing : 이것은 대답하기에 잘못된 곳일 것입니다. 그러나 alt 또는 title 속성을 가진 항목 위로 마우스를 가져갈 때 나타나는 기본 툴팁에 대해 이야기하고 있다면 이 대답 이 통찰력을 줄 것입니다.
Cᴏʀʏ

@Cory 감사합니다, 선생님!
VoidKing

31

jquery UI 모달 대화 상자에서 다음 구문을 사용해야합니다.

$( "#my_dialog" ).dialog( "option", "title", "my new title" );

3
생명의 은인 !! 위의 투표 된 답변을 사용할 때 제목이 한 번 변경되면 대화 상자에서 제목 옵션을 사용하지 않으면 제목이 변경되지 않습니다 !! 감사합니다!
Ryan Ellis

주석을 읽어서 다행입니다 ;-) 제목을 여러 번 변경해야하는 경우 대화 상자 옵션에서 제목을 설정해야합니다.
Michel

이것이 여러 번 받아 들여질 것이라고 생각하지 않았을 것입니다. 나는 그것이 도움이 된 것을 매우 기쁘게 생각합니다 :-)
Igor L.

15

나는 믿는다

$("#myElement").attr("title", "new title value")

또는

$("#myElement").prop("title", "new title value")

트릭을해야합니다 ...

형식이 싫지만 jQuery Docs 에서 모든 핵심 기능을 찾을 수 있다고 생각합니다 .


7

원하는 경우 다른 옵션은 jQuery 객체에서 DOM 요소를 가져 와서 표준 DOM 접근자를 사용하는 것입니다.

$("#myElement")[0].title = "new title value";

다른 사람들이 언급했듯이 "jQuery 방식"은 attr () 메소드를 사용하는 것입니다. attr ()에 대한 API 설명서를 참조 하십시오 .


2
jqueryTitle({
    title: 'New Title'
});

첫 번째 제목 :

jqueryTitle('destroy');

https://github.com/ertaserdi/jQuery-Title


이 문제는 jquery 라이브러리 자체를 사용하여 해결할 수 있습니다. OP가 언급 한 경우 타사 라이브러리 사용 만 참조하거나 타사 라이브러리를 사용하지 않으면 달성 할 수 없습니다.
Avishek

예, 그러나 다른 기능이 있습니다. 간단하지만 좋은 해결책 ... 당신은 검사 할 수 있습니다 ...
Erdi Ertaş

타사 라이브러리의 http 전송 오버 헤드가 있으며 이는 스톡 / 네이티브 메소드를 사용하여 피할 수 있습니다.
Avishek

또한 이미 널리 알려진 대답이 더 효율적입니다.
Avishek

2

a를 작성하고 div추가하려는 title경우.

시험

var myDiv= document.createElement("div");
myDiv.setAttribute('title','mytitle');

0

@ Cᴏʀʏ 답변 외에도 툴팁의 제목이 HTML 요소에서 수동으로 설정되지 않았는지 확인하십시오. 필자의 경우 툴팁의 스팬 클래스에는 이미 작은 텍스트가 고정되어 $('[data-toggle="tooltip"]').prop('title', 'your new title');있습니다. 이 때문에 JQuery 함수 가 작동하지 않았습니다.

HTML span 클래스에서 title 속성을 제거하면 jQuery가 작동했습니다.

그래서:

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" title="this is my pre-set title text"></span>
</span>

코딩해야합니다 :

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top"></span>
</span>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.