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;
}
||<
ベストアンサー
-
Mars
満足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>-
memo77
-
memo77その他の回答
-
yumutan
満足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が適用されていました。
-
memo77
-
- その他の回答を読む
この質問へのコメント
質問の情報
- 登録日時
- 2008-05-26 01:28:43
- 終了日時
- 2008-05-26 22:36:01
- 回答条件
- 1人2回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
ミステリー小説は好きですか？
simadanndann
2
-
自分のサイトにチャットボットを埋め込みたいですどうすれば良いですか
匿名質問者
-
中学3年女子です。 東野圭吾の本が好きな男子って、どんな性格だと思いますか。 （はっきり言って頭が良く…匿名質問者2
1
1
-
自作パソコンを組みのとBTOとどちらが良いなどありますか？ ゲーム配信・動画・イラスト作成編集などする予…
nagadora1
-
あなたは 4/30～5/2は休みですか？
tak2
<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>
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>
回答枠を広げました。
GoldenDawnさんありがとうございます。
いま検証できる環境にないので、また夜にでも確認します。
>>上記サイトにサンプルが載っているのですが、サンプルが誤っているということでしょうか。
memo77さんの言われる埋め込むを正しく解釈してなかったようです。すみません。
サンプルは間違っていません動作します。
>>これはブラウザ依存で正しくない実装なのでなるべく避けようと思っています。
言ってしまえばjavaScriptでの記載も正しくない実装です(javaScript切ってる人はCSS適用されない)
もちろん私の書いた<body>内に記載する方法も同様です(UAによって適用されないので)
分け隔てなく表示させたいのであれば、headが変更できないのなら、タグに埋め込むのが正しい使い方でしょう。
>>また、FireFoxでは動作しましたが、IE7では適用されませんでした。
わたしのIE7だと見れるのですが・・Transitionalで書いたからかな・・
他の方の回答とあわせてよんでいて、エラー処理などの部分が非常に助かりました。ありがとうございました。
＞yumutanさん
まあ正しくないといえばいろいろ正しくないですね。
javascriptいじるのはじめてだったんですが、こんなにブラウザ依存が酷いとは思いませんでした。
オブジェクト構造とか違いすぎる・・・。
私のもTransitionalなんですけどね。もしかしたらサービスのCSSが何か悪さをしていて、ブラウザによる解釈の違いが出ているだけかもしれません。
とりあえず解決しました。
実際にはASPサービスでは動作させられなかったんですが、別環境では動作したので、ここから先はASPサービスの処理を解析しないと。
回答していただいたみなさん、ありがとうございました。