jQueryのwrapInner()を使って、指定したタグ(class=”txt”)をsectionタグで囲んでみます。
後から一時的に指定の文字だけ目立たせたい時などに使えます。
Contents
ディスプレイ広告
タグ要素を指定のHTMLタグ要素で囲むCSSの記述
※タグ要素(.txt)と囲むタグ(section)のCSS記述です。必要に応じて書き換えてください。
<style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif; padding: 0; margin: 0; overflow-x: hidden; line-height: 1.8em; text-align: center; } h1{ font-size:16px; text-align:center; font-weight:normal; padding:10px 0; position: relative; } section{ width: 500px; margin: 0 auto; background-color: #000000; font-size: 24px; font-weight: bold; } .txt{ color: #ffffff; line-height: 2em; } </style>
タグ要素を指定のHTMLタグ要素で囲むHTMLの記述
※タグ要素(class=”txt”)を予め用意します。
<h1>予め記述してるclass=txtタグ×3をwrapInnerを使用し、sectionタグで囲んでます</h1> <div class="txt">テキスト1</div> <div class="txt">テキスト2</div> <div class="txt">テキスト3</div>
wrapInner()を使って、タグ要素を指定のHTMLタグ要素で囲むJavaScriptの記述
※jquery-2.2.0.min.jsファイルを読み込みます。予め用意したタグ(class=”txt”)をsectionタグで囲みます。
<script src="./jquery-2.2.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(".txt").wrapInner('<section></section>'); }); </script>
【wrapInner】指定したタグ要素を、指定のHTMLタグ要素で囲むデモページ
【wrapInner】指定したタグ要素を、指定のHTMLタグ要素で囲むデモ
※流用される場合は自己責任でお願いします。