質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1181閲覧

javascriptでstyleを取得したいです。

saruasru

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/12/16 06:21

前回の質問を解決ごすぐこの問題に直面してしまいました。

現在おみくじの作成をしているのですが、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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

el.innerHTML → el.outerHTML です。

innerHTMLだとtable要素の「中身」だけ取ってきてしまう(<tr>から)ので、cssに書いたtable{...}の中身が適応されません。

投稿2017/12/16 06:32

skatelomere

総合スコア40

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

saruasru

2017/12/16 06:38

できました!!ありがとうございますm(_ _)m
skatelomere

2017/12/16 06:39

それはよかったです、楽しんでくださいね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問