「document.getElementById( ).style.display」を使って
スタイルシートを書き換え、画像とテキストの表示替えをしています。
Firefoxでは正常に動作するのですが、
IEでは「displayプロパティ」を取得できずに動作しません。
htmlは以下のとおりです。
どなたかお分かりになる方、教えていただけないでしょうか?
よろしくお願いします。
★javascriptの内容
function toggle(Aid,Bid,Cid,Did,Eid) {
document.getElementById(Aid).style.display = 'none';
document.getElementById(Bid).style.display = 'inherit';
document.getElementById(Cid).style.display = 'inherit';
document.getElementById(Did).style.display = 'none';
document.getElementById(Eid).style.display = 'none';
}
★スタイルシートの内容
#page {width: 910px;}
#ai{height: 33px;display:inherit;}
#kaki{height: 33px;display:none;}
#img_ai{margin: 0px;float: left;display:none;}
#img_kaki{margin: 0px;float: left;display:inherit;}
No.1ベストアンサー
- 回答日時:
いろいろ調べてみましたが、結論として
「inherit」をIE系(IE5.x、IE6)がサポートしていないのが原因の様です。
「displayプロパティの値を取得できませんでした。引数が不正です。」
のメッセージは、~~.style.displayのプロパティが参照できない事が原因ではなく、右辺値'inherit'が
受け付けられない事によって起こっています。
function toggle(Aid,Bid,Cid,Did,Eid) {
document.getElementById(Aid).style.display = 'none';
document.getElementById(Bid).style.display = 'inherit'; ※
document.getElementById(Cid).style.display = 'inherit';
document.getElementById(Did).style.display = 'none';
document.getElementById(Eid).style.display = 'none';
}
現在は、※の箇所でエラーが発生します。
試みに、一行目の'none'を'xxxx'に変えると、そこでエラーが発生します。
これは、代入値が受付可能なものでないとエラーとなる事を示しています。
ちなみに以下のMSDNのライブラリでも、displayプロパティに対する設定値として'inherit'は
出てきません。
(http://msdn.microsoft.com/library/default.asp?ur …)
一方で、FirefoxのCSS対応表
(http://f57.aaa.livedoor.jp/~motohiko/CSS/css2.1. …)
「'run-in', 'inline-block', 'inline-table' には非対応。」とありますが、'inherit'は対応している
ようです。
代替手段はありそうですが、質問者の方が'inherit'をどのような意図で使っているかわかりかねるので
その点はお答えかねます。
inheritがIEのサポート外だったのですね。
ありがとうございます。
特にinheritを使わなければいけないわけじゃなかったので
blockに変更して、無事正常な動きをするようになりました。
ご丁寧な回答をいただきましてどうもありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryでシンプルドラッグドロ...
-
javascriptテキストBOX色を元に...
-
変数内容をHTML内で表示する方法
-
jQueryで同じid属性が複数あっ...
-
getElementByIdの戻り値がnull...
-
マウスを乗せるとメニュー表示
-
displayの状態を取得したい
-
読み込んだQRコードをフォーム...
-
MAX関数を使ってからLEFT JOIN...
-
タブで開いてさらにタブ内をア...
-
HTMLタグに複数のクラスを設定...
-
透過pngの透明部分以外をクリッ...
-
jQueryでタブ切り替え
-
jQueryでネスト構造の<li>がク...
-
「jQuery」アコーディオンメニ...
-
「画像クリックで音声再生」を ...
-
これはどんなJavaScriptなので...
-
JavaScriptで、?マークとコロ...
-
jQueryでヒアドキュメントを使...
-
1枚の画像をクリックして複数の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
クリックで色変更後に既に変更...
-
iframe内のリンクが飛ばないの...
-
[急ぎ] videoタグで埋め込んだm...
-
背景色を透明化
-
console.log結果をhtmlで表示し...
-
表示・非表示のスクリプトで、...
-
getElementByIdの戻り値がnull...
-
removeAttribute()メソッドで削...
-
テキストエリア内の一部の文字...
-
タブで開いてさらにタブ内をア...
-
IFRAMEの表示/非表示を切り替え...
-
HTMLタグに複数のクラスを設定...
-
jQueryのアコーディオンメニュ...
-
取得した要素がインライン要素...
-
変数内容をHTML内で表示する方法
おすすめ情報