0

バックストーリー：いくつかのポリラインが付いたSVGキャンバスがあります。また、これらのポリラインに対して正確に配置する必要 のあるHTML<span>と要素もいくつかあります。<textarea>

SVGのHTML要素をタグに入れることから始めました<foreignElement>が、IEがそれらをまったく認識せず、Firefoxが<textarea>sを認識しないため、問題が発生しました。だから私はそれらをSVGから取り出し、今ではすべてのブラウザーがそれらを見るようになりました。

ここまでは順調ですね。ポリラインで正しく配置されていることを確認する唯一の方法は、CSSでHTML要素とSVGキャンバスの両方に絶対位置を指定することです。

これが私の問題です。これらすべての要素の上にヘッダーdivがあります。SVGビジネス全体をヘッダーの下に適度な距離に置いてほしい。15pxと言います。ただし、SVGは絶対的に配置されているため、SVGおよび関連するHTML要素を適切な場所に配置するには、そのヘッダーdivの高さを知る必要があります。

.height()jQueryのメソッドといくつかの関連メソッドを試しました。それらすべての問題は、FirefoxとChromeが2つの異なる結果をもたらすことです。FFではヘッダーがわずかに高いことが視覚的にわかりますが、FFの方が高さの読み取り値が小さいため、これは2つの間の実際のピクセルの高さの違いを反映していないことがわかります。

ヘッダーdivのブラウザー整合性のある高さの読み取り値を取得するにはどうすればよいですか？または、すべてのブラウザで他の要素をその下の同じ距離に絶対的に配置するために使用できる少なくとも1つ。

4

1 に答える 1

1

この機能で試すことができます

function getHeight() {
    return Math.min(
            Math.min(document.body.scrollHeight, document.documentElement.scrollHeight),
            Math.min(document.body.offsetHeight, document.documentElement.offsetHeight),
            Math.min(document.body.clientHeight, document.documentElement.clientHeight)
        );

}

または単にdocument.documentElement.clientHeight、を使用します。これは通常、テストに使用するすべてのブラウザ（Chrome、Firefox、Safari、Opera）でうまくいきます。

[編集]上記の関数は本体の幅と高さを返します。任意のdivで使用するには、これを使用してください

function getHeight(div) {
        return Math.min(div.scrollHeight, div.offsetHeight, div.clientHeight);  
    }

このように使えます

var myDiv = document.getElementById('myDivId');
console.log('the height is ' + getHeight(myDiv));

[edit2]実際には、ブラウザによってdivのサイズが異なる場合があることに注意してください。

これがグーグルクロームで、上部の緑色のバーが高さ75pxのナビゲーションバーだとしましょう。100％で、高さ1000ピクセルの画面がいっぱいになり、100ピクセルのdivを画面の上部に配置し、100ピクセルのdivを画面の下部（青）に貼り付けます。それらの間の紫色のdivの高さは725pxになります。

グーグルクロームの例

そして、これはFirefoxです。同じ1000pxの画面に100％で配置されていますが、ナビゲーションバーの高さは100pxです。上部と下部に同じ100pxの青いdivがある場合、紫色のdivの高さはここでは700pxになり、クロムとは異なります。

Firefoxの例

もちろん、これは非常に単純な例であり、これがあなたの場合ではないかと思います。ただし、divの配置についても同様の問題が発生する可能性があるため、確認する必要があります。

于 2012-09-14T07:46:22.660 に答える