前回の質問を解決ごすぐこの問題に直面してしまいました。
現在おみくじの作成をしているのですが、htmlでいくつかのおみくじ結果を作成し
それをランダムで呼び出すようなjavascriptを書いています。
現状、おみくじの結果のテキストを取得して表示させることはできているのですが、
そのテキストについてのstyleやタグが全く効いてない状態です。
タグやstyleも取得して制作している見た目のままをおみくじの結果を表示させることは可能でしょうか?
javascript
1 function getOmikuji () { 2 var omikuji = ["id1","id2","id3"]; 3 var index = Math.floor(Math.random() * omikuji.length); // ランダムで0-2の値を取得 4 var id = omikuji[index]; // ランダムで取得した値に対応するidを取得 5 var el = document.getElementById(id); // idに対する要素を取得 6 var result = el.innerHTML; // div内のtextを取得 7 8 document.getElementById('result').innerHTML = result; // 結果を表示 9 }
↓htmlとcssが効いておらず、ローカル環境で開くと
[大吉 【方向】 西が吉]とテキストがただ表示されるだけになってしまいます。
html
1 <table id="id1"> 2 <tr> 3 <th colspan="8">大吉</th> 4 </tr> 5 <tr class="title"> 6 <td><span>【方向】</span></td> 7 </tr> 8 <tr> 9 <td><span>西が吉</span></td> 10 </tr> 11 </table>
css
1table{ 2 border: 1px solid #FF0000; 3 margin: 50px auto; 4 width: 350px; 5} 6th{ 7 border: 1px solid #FF0000; 8 color: #FF0000; 9 font-size: 30px; 10} 11td + td{ 12 border-right: 1px dashed #FF0000; 13} 14td{ 15 text-align: center; 16 padding-top: 10px; 17 vertical-align: top; 18} 19td span { 20 -ms-writing-mode: tb-rl; 21 writing-mode: vertical-rl; 22 margin: 0 auto; 23 white-space: nowrap; 24 width: 1em; /* firefox対策 */ 25 line-height: 1em; /* firefox対策 */ 26 text-orientation: upright; 27} 28.title td{ 29 color: #FF0000; 30}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/16 06:38
2017/12/16 06:39