id:memo77
ポイントあり140ptベストアンサーあり
コンピュータウェブ制作

BODY内のスクリプトでHEADに<style>...</style>を埋め込みたい。

ヘッダをさわることができないASPサービスを使用しています。
しかしbody内にスクリプトが書けるので、ヘッダにstyleを埋め込めるのではと思い、検索して下記情報は見つけました。
http://www.tagindex.com/cgi-lib/bbs/patio.cgi?mode=view2&f=146&no=325

この例は外部cssを読む例ですが、今回はわずかな改変なのでstyleタグを直接埋め込みたいと思っています。
下記の内容を埋め込むスクリプトを書いていただけませんでしょうか。

>|css|
h2 {
color:#01468B;
font-weight:bold;
font-size:12px;
border-bottom:1px solid #8DAAC7;
padding:6px 2px 2px 2px;
cursor:default;
margin-top:4px;
}
||<

回答の条件
  • 1人2回まで
  • 登録：
  • 終了：2008/05/26 22:36:01
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:Mars No.4

回答回数203ベストアンサー獲得回数20

ポイント100pt

Javascriptでは改行をなんとかしないとデータとして持てないので

あまり美しくも簡単にもならないです。

元サンプルのように外部ファイルを用意して読み込ませた方がメンテナンスとか楽になるかと思います。

一応、サンプル。

（BODY内のどこに書いてもいいけど、最後に書けば最後まで適用されないのでみっともないかも）

<script type="text/javascript">
var selector = 'H2';
var data = 
"color:#01468B;～長くなるので省略～;margin-top:4px;";

document.getElementsByTagName('head')[0].
appendChild(document.createElement('style'));
var CSS = document.styleSheets[document.styleSheets.length -1]; 
if(CSS.insertRule) {//IE以外
	CSS.insertRule(selector+'{'+data+'}', 0);
} else {//IE
	CSS.addRule(selector, data);
}
</script>
id:memo77

いちばんクリティカルな回答でした。

ありがとうございました。

2008/05/26 22:29:21

その他の回答（4件）

id:yumutan No.1

回答回数8ベストアンサー獲得回数1

ポイント10pt

BODY内にCSSタグを書くという方法もあるみたいです。（ＵＡによってはいけないかも？）

↓↓↓これをBODY内に↓↓↓

＜style type="text/css"＞

＜!－－

h2 {color:#01468B;font-weight:bold;font-size:12px;border-bottom:1px solid #8DAAC7;padding:6px 2px 2px 2px;cursor:default;margin-top:4px;}

－－＞

＜/style＞

＜h2＞あいうえお＜/h2＞

表示がくずれるので＜＞とコメントアウトは大文字で書きました

IE6

IE7

Firefox2

では正常にCSSが適用されていました。

id:memo77

これはブラウザ依存で正しくない実装なのでなるべく避けようと思っています。

また、FireFoxでは動作しましたが、IE7では適用されませんでした。

2008/05/26 09:13:31
id:yumutan No.2

回答回数8ベストアンサー獲得回数1

ポイント10pt

body内からheadに情報を埋め込むことはできません。

<h2 style="color:#01468B;font-weight:bold;～">あいうえお</h2>

みたいな形で記載するしかないと思います。

id:memo77

上記サイトにサンプルが載っているのですが、サンプルが誤っているということでしょうか。

2008/05/26 09:12:30
id:y-kawaz No.3

回答回数1422ベストアンサー獲得回数226

ポイント20pt

以下のURLでJavascriptからCSSを設定を設定する手順をまとめています。

http://www.kawaz.jp/pukiwiki/?JavaScript%A5%E1%A5%E2#wb6005c8

デモページのソースが参考になると思います。

id:memo77

最初まったく理解できませんでしたが、他の方のレスを検証している中で、情報を参考にできるようになりました。

ありがとうございました。

2008/05/26 22:28:03
id:Mars No.4

回答回数203ベストアンサー獲得回数20ここでベストアンサー

ポイント100pt

Javascriptでは改行をなんとかしないとデータとして持てないので

あまり美しくも簡単にもならないです。

元サンプルのように外部ファイルを用意して読み込ませた方がメンテナンスとか楽になるかと思います。

一応、サンプル。

（BODY内のどこに書いてもいいけど、最後に書けば最後まで適用されないのでみっともないかも）

<script type="text/javascript">
var selector = 'H2';
var data = 
"color:#01468B;～長くなるので省略～;margin-top:4px;";

document.getElementsByTagName('head')[0].
appendChild(document.createElement('style'));
var CSS = document.styleSheets[document.styleSheets.length -1]; 
if(CSS.insertRule) {//IE以外
	CSS.insertRule(selector+'{'+data+'}', 0);
} else {//IE
	CSS.addRule(selector, data);
}
</script>
id:memo77

いちばんクリティカルな回答でした。

ありがとうございました。

2008/05/26 22:29:21
id:redwing1 No.5

回答回数541ベストアンサー獲得回数3

ポイント10pt

別にヘッダにかかなくても、本文に書く方法もありますよ。

コメント（7件)

  • id:memo77
    memo77 2008/05/26 01:31:30
    なんかスーパーpre記法がうまくいかなかったので見難いですが、よろしくお願いします。
  • id:memo77
    memo77 2008/05/26 07:30:47
    redwing1さんの回答は開けない予定ですので、他の方、よろしくお願いします。
  • id:GoldenDawn
    GoldenDawn 2008/05/26 12:52:13
    こんなのが一番手っ取り早いような気がします。

    <script type="text/javascript">
    <!--
    onload = function() {
    var allH2 = document.getElementsByTagName('h2') ;
    for (var i = 0; i < allH2.length; ++i) {
    with (allH2[i].style) {
    color = '#01468B' ;
    fontWeight = 'bold' ;
    fontSize = '12px' ;
    borderBottom = '1px solid #8DAAC7' ;
    padding = '6px 2px 2px 2px' ;
    cursor = 'default' ;
    marginTop = '4px' ;
    }
    }
    }
    //-->
    </script>
  • id:GoldenDawn
    GoldenDawn 2008/05/26 13:03:23
    Firefox と Opera ならこんなのでも。
    IE と Safari は style の innerHTML が書き換えられなくてエラーになる。

    <script type="text/css" id="mycss">
    h2 {
    color:#01468B ;
    font-weight:bold ;
    font-size:12px ;
    border-bottom:1px solid #8DAAC7 ;
    padding:6px 2px 2px 2px ;
    cursor:default ;
    margin-top:4px ;
    }
    </script>
    <script type="text/javascript">
    <!--
    var header = document.getElementsByTagName("head").item(0) ;
    var style = document.createElement("style") ;
    style.type = 'text/css' ;
    try {
    style.innerHTML = document.getElementById('mycss').innerHTML ;
    } catch (e) {
    alert(e.message) ;
    }
    header.appendChild(style) ;
    //-->
    </script>
  • id:memo77
    memo77 2008/05/26 14:33:30
    ああ・・・すみません。回答枠がいっぱいになってましたね。
    回答枠を広げました。

    GoldenDawnさんありがとうございます。
    いま検証できる環境にないので、また夜にでも確認します。
  • id:yumutan
    yumutan 2008/05/26 16:15:36
    >>memo77さん
    >>上記サイトにサンプルが載っているのですが、サンプルが誤っているということでしょうか。
    memo77さんの言われる埋め込むを正しく解釈してなかったようです。すみません。
    サンプルは間違っていません動作します。

    >>これはブラウザ依存で正しくない実装なのでなるべく避けようと思っています。
    言ってしまえばjavaScriptでの記載も正しくない実装です(javaScript切ってる人はCSS適用されない)
    もちろん私の書いた<body>内に記載する方法も同様です(UAによって適用されないので)

    分け隔てなく表示させたいのであれば、headが変更できないのなら、タグに埋め込むのが正しい使い方でしょう。

    >>また、FireFoxでは動作しましたが、IE7では適用されませんでした。
    わたしのIE7だと見れるのですが・・Transitionalで書いたからかな・・
  • id:memo77
    memo77 2008/05/26 22:34:38
    ＞GoldenDawnさん
    他の方の回答とあわせてよんでいて、エラー処理などの部分が非常に助かりました。ありがとうございました。

    ＞yumutanさん
    まあ正しくないといえばいろいろ正しくないですね。
    javascriptいじるのはじめてだったんですが、こんなにブラウザ依存が酷いとは思いませんでした。
    オブジェクト構造とか違いすぎる・・・。

    私のもTransitionalなんですけどね。もしかしたらサービスのCSSが何か悪さをしていて、ブラウザによる解釈の違いが出ているだけかもしれません。


    とりあえず解決しました。
    実際にはASPサービスでは動作させられなかったんですが、別環境では動作したので、ここから先はASPサービスの処理を解析しないと。
    回答していただいたみなさん、ありがとうございました。

この質問への反応（ブックマークコメント）

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ