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

코드를 작성하기 전에 속성과 속성의 차이점에 대해 설명하겠습니다. 속성은 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 문서 를 확인하십시오 .

답변

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

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

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

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

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

jqueryTitle('destroy');

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

<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>