は、ツールヒント

Question

に関数を渡し、私はポストに関連するタグを印刷していますし、結果は以下のようになります。

function getTag(){ 
 
    
 
    return "browse posts related to" + this.innerHTML; 
 

 
}

span, a{ 
 
    background: red; 
 
    color: #fff; 
 
    margin: 3px; 
 
    padding: 1px; 
 
    text-decoration: none; 
 
}

Tags: <span title= 'getTag()'> 
 
<a href="#"> food </a> 
 
</span> 
 

 
<span title= 'getTag()'> 
 
<a href="#"> recipe </a> 
 
</span> 
 

 
<span title= 'getTag()'> 
 
<a href="#"> drink </a> 
 
</span>

私は属性に機能getTag()を渡して試してみましたtitleが正常に動作していません。

各span要素のテキストコンテンツを取得するためにJavaScriptを使用し、各span要素のtitle属性にテキストコンテンツを渡すにはどうすればよいですか。

これを達成するためにJavaScriptを使用したいと思います。

Answer 1

ライブラリを使用しない場合は、DOMを操作する必要があります。スクリプト要素をページの下部に配置します。

<script> 
var spans = document.querySelectorAll('span'); 

for (var i = 0; i < spans.length; i++) { 
    spans[i].title = 'browse posts related to ' + spans[i].innerHTML; 
} 
</script> 

スクリプトは分かりやすいです。ブラウザにスパン要素をすべて取得し、スパンと呼ばれる変数に格納するように指示します。次のステップでは、各スパンをループして属性を操作できます。