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を使用して要素のtitle プロパティを取得または設定する(v1.6以降)

jQueryは、プロパティを取得および設定するための新しいメソッドをv1.6で導入しました。title要素にプロパティを設定するには、以下を使用します。

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

タイトルを取得したい場合は、2番目のパラメーターを省略して戻り値を取得します。

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

jQuery のprop()APIドキュメントを確認してください。

あなたがいる場合、実際にプロパティを使用したくない、またはあなたがバージョン1.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:私は再訪し、人気のある現在の答えを作る傾向があります(そのうちいくつかしかありません)。調査したり質問を投稿したりした場合に見つけたいと思うすべてのものを提供するようにしています。見つけてよかった!
2013年

@Coryさて、私が何か他のものを探していたので正直に言って(それは長いショットでしたが、デフォルトのHTMLタイトルボックスをスタイルする方法があるかどうか探していました)。探していたものは見つかりませんでしたが、この回答に費やした努力には本当に感心しました(リソース、純粋な.jsやjQueryなどを示しました)。とにかく、いい答えです!
VoidKing 2013年

@VoidKing:これはおそらく答えるのに間違った場所ですが、alt属性またはtitle属性を持つアイテムにカーソルを合わせると表示されるデフォルトのツールチップについて話している場合、おそらくこの答えは洞察を与えるでしょう。
2013年

@コリーありがとうございます、サー!
VoidKing 2013年

31

jquery uiモーダルダイアログでは、次の構成を使用する必要があります。

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

3
命の恩人!! 上記の投票された回答を使用すると、タイトルが一度変更され、その後、ダイアログ内のタイトルオプションを使用しない限り、タイトルは変更されません。ありがとうございました。
Ryan Ellis

コメントを読んでよかった;-)何度かタイトルを変更する必要がある場合は、ダイアログオプションで設定する必要があります。
ミシェル14

これが何度も受け入れられるとは考えもしなかったでしょう。それが役に立ったことをとても嬉しく思います:-)
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 2015

はい、しかし他の機能があります。シンプルだが素晴らしい解決策...あなたは調べることができます...
ErdiErtaş2015

サードパーティライブラリのhttp転送オーバーヘッドが発生します。これは、stock / nativeメソッドを使用して回避できます。
Avishek 2015

さらに、より効率的な、広く受け入れられている答えがすでにあります。
Avishek 2015

2

を作成し、divそれにを追加しようとしtitleている場合。

試す

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

0

@Cᴏʀʏ回答に加えて、ツールチップのタイトルがHTML要素で手動で設定されていないことを確認してください。私の場合、ツールチップのスパンクラスには固定のタイトルテキストが既にありました。$('[data-toggle="tooltip"]').prop('title', 'your new title');。がしませんでした。

HTMLスパンクラスの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.