2

ブラウザがアラートやプロンプトなどを表示するために使用するフォントサイズとフォントファミリを取得しようとしています
。しかし、空白のアラートが表示されます。どこが間違っていますか？

4

4 に答える 4

5

まあ、私はKolinkが上で言ったことに同意しますが、あなたも試してみたいことがあります:

<body id="body">
<script>
var theCSSprop = window.getComputedStyle(document.body,null).getPropertyValue("font-family");
console.log(theCSSprop); // output: serif
</script>
</body>

上記のコードでは、FF を開いてプロポーショナル設定を変更すると、出力も変更されることがあります。楽しむ ：）

ここに画像の説明を入力

于 2013-03-05T16:38:15.090 に答える
1

SomeElement.style.SomeStylestyle要素の属性で定義されているスタイルのみを取得します。したがって、特に持っていない場合<body style="font-family:blah">は、結果が得られません。

を使用してスタイルシートからスタイルを取得することは可能ですが、getComputedStyleこれには古いIEのシムが必要です。

window.getComputedStyle = window.getComputedStyle || function(e) {return e.currentStyle;};

その上、これは本当にあなたが探しているものではありません。

理論的には、次のようにWebページのデフォルトのテキストスタイルを取得できます。

window.getComputedStyle(document.createElement('div')).fontFamily;

ただし、これは必ずしもアラートやプロンプトで使用されるフォントと同じではありません（通常はそうではありません）。これらはブラウザではなくOSによってレンダリングされるため、残念ながら、ユーザーが設定でフォントを変更したかどうかを知る方法はありません。それが役に立ったら、そのようなボックスのデフォルトはですArial 10pt。

于 2013-03-05T16:08:40.937 に答える
1

ダイアログを直接測定することはできませんが、キーワードを使用して要素のフォントをブラウザー システム フォントに設定し、その要素を調べることができます。

style="font:message-box" を使用して隠し要素を動的に作成できます。この例では、ページの既存の css を使用します。

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Small Page</title>
<style>
.message{border:2px black ridge;font:message-box}
</style>

</head>
<body>

<div class="message">

<p><strong>"Here's another fine mess you've gotten us in."- 
        <em> Oliver Hardy</em></strong></p>
</div>

<script>
onload= function(){
    var who= document.getElementsByTagName('div')[0],props;
    if(window.getComputedStyle){
        who= getComputedStyle(who, ''),
        props= ['font-family', 'font-size', 'font-weight', 
        'line-height'].map(function(itm){
            return itm+': '+who.getPropertyValue(itm);
        });     
    }
    else if(who.currentStyle){//IE<9
        who= who.currentStyle;
        props= ['fontFamily', 'fontSize', 'fontWeight',
        'lineHeight'].map(function(itm){
            return itm+': '+ who[itm];
        });
    }
    alert(props.join('\n'));
}

if(!Array.prototype.map){//IE<9
    Array.prototype.map= function(fun, scope){
        var T= this, L= T.length, A= Array(L), i= 0;
        if(typeof fun== 'function'){
            while(i<L){
                if(i in T){
                    A[i]= fun.call(scope, T[i], i, T);
                }
                ++i;
            }
            return A;
        }
    }
}

</script>
</body>
</html>
于 2013-03-05T17:21:43.353 に答える
1

アラート (確認、プロンプト) ボックスなどのコントロールは、ブラウザーではなく、オペレーティング システムによってレンダリングされます。これを制御することはできません。

于 2013-03-05T16:03:27.763 に答える