Webページ用のリンクIDを表示

私はJSを初めて使用しています。ページ上のすべてのリンクのすべてのIDをWebページに表示する方法を探しています。各リンクの横にあるツールチップのように表示されます。ブックマークレットをクリックして、これらのツールチップを表示させることを望んでいます。Webページ用のリンクIDを表示

おかげで、ロバート

出典

2017-11-20 Robert

ファーストをやりたいだろういくつかのCSSを注入だろうか？ 2つは同じではありません。あなた自身でこれを達成しようと試みたことがありますか？あなたがベンを試していたもののサンプルコードを私に与えてから、私はdownvoteする必要があります。 –

@ iiiml0sto1 jQueryはjavascriptなので、両方とも珍しくありません – charlietfl

JqueryはJavascriptライブラリです....私の質問は再びJqueryまたはJavascriptのRobertコードを実行しますが、それらは混在する可能性がありますが、知っている。 Javascriptの質問を検索してJqueryの質問に常に迷惑をかけていることがわかっている場合は、人々は2つのタグimoを混同すべきではありません。 –

あなたはちょうどあなたがこのはJavascriptやjQueryの質問で、すべての

/*target <a> tags that have an id attribute*/ 
 
a[id]:after{ 
 
    content:attr(id); 
 
    position:absolute; 
 
    margin-top:-1em; 
 
    padding:0.1em 0.3em; 
 
    background:rgba(0,0,0,0.5); 
 
    color:white; 
 
    font-size:0.8em; 
 
}

<p> 
 
    some text and a <a href="#" id="id-1">link</a> to test the id tooltip and 
 
    some more text and another <a href="#" id="id-2">link</a> to test some text and a <a href="#" id="id-3">link</a> to test the id tooltip and 
 
    some other <a href="#" id="id-4">link</a> to testsome text and a <a href="#" id="id-5">link</a> to test the id tooltip and 
 
    some more text and another <a href="#" id="id-6">link</a> to test 
 
</p>

出典

2017-11-21 00:03:01

Gabyさん、ありがとうございます。これを試してみましょう。とても有難い。 – Robert

こんにちは、私はまだjavascriptまたはjqueryを使用してこれを達成する方法を理解しようとしています。私はGabyの提案を使用しているcodepenがあり、これは視覚的に私が望むものですが、私はブックマークを作成するために、一度クリックしてウェブページ上でこれを実行するためにJavaScriptを実行する場所を探しています。ルック・アンド・フィールのコーデック：https://codepen.io/rlewis/pen/dZxooa ブックマークレットを作成できるようにJavascriptを使用してこれを実行する方法についての助けがあれば幸いです。 Thanks – Robert

@Robert JSで要素を実際に見つける必要はありません。あなたがしなければならないのは、JSがページにCSSを挿入することだけです。 https://codepen.io/gpetrioli/pen/KyOzXvを参照してください –

Webページ用のリンクIDを表示

答えて

関連する問題