jQueryのwrapInnerを使って、予め用意したclass=txtタグをwrapInnerを使用し、sectionタグで囲んでみます。
後から一時的に指定の文字だけ目立たせたい時等に使えます。
Contents
予め用意するタグ(class=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>
予め用意するタグ(class=txt)のHTMLの記述
<h1>予め記述してるclass=txtタグ×3をwrapInnerを使用し、sectionタグで囲んでます</h1> <div class="txt">テキスト1</div> <div class="txt">テキスト2</div> <div class="txt">テキスト3</div>
予め用意したタグ(class=txt)をsectionタグで囲むJavaScriptの記述
※pタグにclass=”iti”タグの現在位置を表示させます。
<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タグ要素で囲むデモ
※流用される場合は自己責任でお願いします。