親ページに文字サイズ変更ボタンを設置していて、文字サイズ変更
ボタンをクリックした場合、そのページのHTMLと、インライン
フレーム内のHTMLの文字サイズを同時に変更することは可能
でしょうか?
現在はprototype.jsを外部から読み込み、以下のソースで作成して
いますが、どうしてもインラインフレーム内の文字の大きさが変更
できません。
何度もいろいろ方法を試してみたのですが、うまくいきません。
どうかよろしくお願いします。
<html>
<head>
<title></title>
<script type="text/javascript">
function setLargeFont(){
Element.setStyle('stopnlisten',
{
"font-size" : "x-large"
});
}
function setMidStyle(){
Element.setStyle('stopnlisten',
{
"font-size" : "medium"
});
}
function setSmallStyle(){
Element.setStyle('stopnlisten',
{
"font-size" : "x-small"
});
}
</script>
</head>
<body id="stopnlisten">
<ul id="font-setting">
<li><button onclick="setLargeFont();" id="font-large">大</button></li>
<li><button onclick="setMidStyle();" id="font-medium">中</button></li>
<li><button onclick="setSmallStyle();" id="font-large">小</button></li>
</ul>
<p>
<iframe src="~" id="stopnlisten"></iframe>
</p>
</body>
</html>
No.2
- 回答日時:
iframeはオブジェクトですが、その内側はまた別のdocumentになりますので、
$('stopnlisten')では操作できないと思います。
iframe内のオブジェクトにアクセスする手段はIEとそれ以外で違うのですが
prototype.jsでこのあたりのブラウザの違いを吸収してくれているかどうかはわかりません。
ってわけで、とりあえずIEとFirefoxでだけ確認したサンプルです。
(一部、関係ない部分も好みで修正してます。)
<html>
<head>
<title></title>
</head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function setFont(obj){
Element.setStyle(
($('stopnlisten').contentWindow)?
$('stopnlisten').contentWindow.document.body:
$('stopnlisten').document.body,
{
"font-size" : obj.id.substring(5)
});
}
</script>
<body>
<ul id="font-setting">
<li><button onclick="setFont(this);" id="font-x-large">大</button></li>
<li><button onclick="setFont(this);" id="font-medium">中</button></li>
<li><button onclick="setFont(this);" id="font-x-small">小</button></li>
<p><iframe src="~" id="stopnlisten"></iframe></p>
</body>
</html>
早速のお返事ありがとうございます!
試してみた所、確かに子HTML(インラインフレーム内)の
フォントサイズは変更できたのですが、親HTML内のフォントサイズ
は変更できませんでした。
質問の仕方が不十分だったかもしれません。
親HTML内に配置した文字サイズ変更ボタンを一度クリックすると
親HTML、子HTML双方のフォントサイズを同時に変更できるように
したいと考えています。
可能なのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSが上手く反映されないみたい...
-
<table>の高さ固定。情報増加時...
-
CSSでつくったメニューのアニメ...
-
リストマーカーをボックス内に...
-
divタグ内のコンテンツが重なっ...
-
ulタグやliタグの中でbrタグ...
-
真横に展開するドロップダウン...
-
<ul><li></li></ul>にするメリ...
-
liタグの中に<p>タグやら<dl>を...
-
URLにアクセスした際に指定した...
-
HTMLです
-
プルダウンメニューの背景色を...
-
「CSS」リストの2段組どのよう...
-
サイドバーの作り方を教えてく...
-
CSSでの<ul><li>を使った改行設定
-
htmlの<ol>タグで、数字などを...
-
html/cssの、navを2段にする...
-
CSS「table-cell」で横並びにし...
-
pythonリストの特定の値を表示h...
-
li 長さ指定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
divタグ内のコンテンツが重なっ...
-
リストの数字のフォントサイズ...
-
html/cssの、navを2段にする...
-
レスポンシブWebデザインでリン...
-
ulタグやliタグの中でbrタグ...
-
複数行にまたがる括弧を表示し...
-
<table>の高さ固定。情報増加時...
-
画像にリンクを張ると画像がず...
-
html <ul></ul>の並びで一行空...
-
<ul><li></li></ul>にするメリ...
-
ページを開いているときのリン...
-
HTMLで組織図を作成する方法
-
リンク文字同士の間隔を開ける...
-
htmlの<ol>タグで、数字などを...
-
ボタンを横に並べて表示させる方法
-
bxsliderの画像が左によってしまう
-
番号付きリスト(<Ol><Li>・・...
-
HTMLもしくはCSSのULでリンクを...
おすすめ情報