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 01:28:43
  • 終了:2008/05/26 22:36:01

ベストアンサー

id:Mars No.4

Mars回答回数203ベストアンサー獲得回数202008/05/26 09:38:21

ポイント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

yumutan回答回数8ベストアンサー獲得回数12008/05/26 08:34:43

ポイント10pt

BODY内にCSSタグを書くという方法もあるみたいです。(UAによってはいけないかも?)

↓↓↓これを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

yumutan回答回数8ベストアンサー獲得回数12008/05/26 07:40:23

ポイント10pt

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

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

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

id:memo77

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

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

y-kawaz回答回数1419ベストアンサー獲得回数2252008/05/26 09:41:06

ポイント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

Mars回答回数203ベストアンサー獲得回数202008/05/26 09:38:21ここでベストアンサー

ポイント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

redwing1回答回数541ベストアンサー獲得回数32008/05/26 01:50:38

ポイント10pt

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

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

    <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
    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
    ああ・・・すみません。回答枠がいっぱいになってましたね。
    回答枠を広げました。

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

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

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

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

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

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


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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません