<div>ブラウザのディスプレイ (ビューポート) の中央に配置したいがあるとします。そのためには、<div>要素の幅と高さを計算する必要があります。
何を使えばいいですか？ブラウザの互換性に関する情報を含めてください。
smerp
質問する
1278112 次
16 に答える
1525
.offsetWidthプロパティとプロパティを使用する必要があり.offsetHeightます。ではなく、要素に属していることに注意してください.style。
var width = document.getElementById('foo').offsetWidth;
この関数.getBoundingClientRect()は、CSS 変換を実行した後、要素の寸法と位置を浮動小数点数として返します。
> console.log(document.getElementById('id').getBoundingClientRect())
DOMRect {
bottom: 177,
height: 54.7,
left: 278.5,
right: 909.5,
top: 122.3,
width: 631,
x: 278.5,
y: 122.3,
}
于 2008-11-16T19:35:11.697 に答える
231
をご覧くださいElement.getBoundingClientRect()。
widthこのメソッドは、 、height、およびその他の有用な値を含むオブジェクトを返します。
{
width: 960,
height: 71,
top: 603,
bottom: 674,
left: 360,
right: 1320
}
例えば：
var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
これには問題がなく、時々返される場所で行う.offsetWidthと思います（ここのコメントで説明されているように）.offsetHeight0
もう 1 つの違いはgetBoundingClientRect()、小数点以下のピクセルを返す場合があり、ここで.offsetWidthと.offsetHeightは最も近い整数に丸められます。
IE8 注: IE8getBoundingClientRect以下では高さと幅を返しません。*
IE8 をサポートする必要がある場合は、 and を使用.offsetWidthし.offsetHeightます。
var height = element.offsetHeight;
var width = element.offsetWidth;
このメソッドによって返されるオブジェクトは、実際には通常のオブジェクトではないことに注意してください。そのプロパティは列挙可能ではありません(たとえば、Object.keysそのままでは機能しません)。
詳細はこちら: ClientRect / DomRect をプレーンなオブジェクトに変換する最善の方法
参照：
.offsetHeight: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight.offsetWidth: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth.getBoundingClientRect(): https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
于 2015-09-18T18:37:04.957 に答える
75
注:この回答は 2008 年に書かれました。当時、ほとんどの人にとって最適なクロスブラウザー ソリューションは、jQuery を使用することでした。後世のためにここに答えを残しておきます.jQueryを使用している場合、これは良い方法です. 他のフレームワークまたは純粋な JavaScript を使用している場合は、受け入れられた答えがおそらく進むべき道です。
jQuery 1.2.6 の時点で、コアCSS 関数の1 つと(または必要に応じてheightと) を使用できます。widthouterHeightouterWidth
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
于 2008-11-16T19:29:19.323 に答える
54
誰にとっても便利な場合に備えて、テキストボックス、ボタン、および div をすべて同じ css で配置します。
width:200px;
height:20px;
border:solid 1px #000;
padding:2px;
<input id="t" type="text" />
<input id="b" type="button" />
<div id="d"></div>
chrome、firefox、ie-edge で試してみました。jquery ありとなしで試しましたbox-sizing:border-box。いつも一緒<!DOCTYPE html>
結果：
Firefox Chrome IE-Edge
with w/o with w/o with w/o box-sizing
$("#t").width() 194 200 194 200 194 200
$("#b").width() 194 194 194 194 194 194
$("#d").width() 194 200 194 200 194 200
$("#t").outerWidth() 200 206 200 206 200 206
$("#b").outerWidth() 200 200 200 200 200 200
$("#d").outerWidth() 200 206 200 206 200 206
$("#t").innerWidth() 198 204 198 204 198 204
$("#b").innerWidth() 198 198 198 198 198 198
$("#d").innerWidth() 198 204 198 204 198 204
$("#t").css('width') 200px 200px 200px 200px 200px 200px
$("#b").css('width') 200px 200px 200px 200px 200px 200px
$("#d").css('width') 200px 200px 200px 200px 200px 200px
$("#t").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#b").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#d").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#t").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#b").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#d").css('padding-left') 2px 2px 2px 2px 2px 2px
document.getElementById("t").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("b").getBoundingClientRect().width 200 200 200 200 200 200
document.getElementById("d").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("t").offsetWidth 200 206 200 206 200 206
document.getElementById("b").offsetWidth 200 200 200 200 200 200
document.getElementById("d").offsetWidth 200 206 200 206 200 206
于 2016-02-19T12:52:13.587 に答える
6
IE7 以前の場合にのみ計算する必要があります (コンテンツのサイズが固定されていない場合のみ)。CSS2 をサポートしていない古い IE へのハッキングを制限するために、HTML 条件付きコメントを使用することをお勧めします。他のすべてのブラウザーでは、これを使用します。
<style type="text/css">
html,body {display:table; height:100%;width:100%;margin:0;padding:0;}
body {display:table-cell; vertical-align:middle;}
div {display:table; margin:0 auto; background:red;}
</style>
<body><div>test<br>test</div></body>
これは完璧なソリューションです。任意のサイズを中央に配置<div>し、コンテンツのサイズに合わせてシュリンク ラップします。
于 2008-11-16T20:57:23.497 に答える
4
要素のスタイルを変更するのは簡単ですが、値を読み取るのはちょっと難しいです。
JavaScript は、組み込みメソッド呼び出し getComputedStyle を JavaScript で使用しない限り、css(internal/external) からの要素スタイル プロパティ (elem.style) を読み取ることができません。
getComputedStyle(要素[, 疑似])
Element:値を読み取る要素。
pseudo:必要に応じて疑似要素 (::before など)。空の文字列または引数なしは、要素自体を意味します。
結果は、elem.style のようなスタイル プロパティを持つオブジェクトですが、現在はすべての css クラスに関してです。
たとえば、次のスタイルではマージンが表示されません。
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// now we can read the margin and the color from it
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>
そのため、javaScript コードを変更して、取得したい要素の getComputedStyle を含めるようにしました。幅/高さまたはその他の属性
window.onload = function() {
var test = document.getElementById("test");
test.addEventListener("click", select);
function select(e) {
var elementID = e.target.id;
var element = document.getElementById(elementID);
let computedStyle = getComputedStyle(element);
var width = computedStyle.width;
console.log(element);
console.log(width);
}
}
計算されて解決された値
CSS には 2 つの概念があります。
計算されたスタイル値は、CSS カスケードの結果として、すべての CSS ルールと CSS 継承が適用された後の値です。height:1em または font-size:125% のようになります。
解決されたスタイル値は、要素に最終的に適用されるものです。1em や 125% などの値は相対的です。ブラウザーは計算された値を取得し、すべての単位を固定および絶対にします。たとえば、height:20px または font-size:16px です。ジオメトリ プロパティでは、幅:50.5px のように、解決された値に浮動小数点が含まれる場合があります。
昔は計算値を取得するために getComputedStyle が作成されていましたが、解決された値の方がはるかに便利であることが判明し、基準が変更されました。
そのため、現在 getComputedStyle は実際にプロパティの解決された値を返します。
ご注意ください：
getComputedStyle には完全なプロパティ名が必要です
paddingLeft、高さ、幅など、必要な正確なプロパティを常に要求する必要があります。そうしないと、正しい結果が保証されません。
たとえば、プロパティ paddingLeft/paddingTop がある場合、getComputedStyle(elem).padding に対して何を取得する必要がありますか? 何もない、または既知のパディングから「生成された」値ですか? ここには標準的なルールはありません。
他にも矛盾があります。例として、一部のブラウザー (Chrome) は以下のドキュメントで 10px を表示し、一部のブラウザー (Firefox) は表示しません:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
于 2018-04-27T11:58:34.780 に答える
2
以前の投稿で提案されているように、element.offsetWidth と element.offsetHeight を使用する必要があります。
ただし、コンテンツを中央に配置したいだけの場合は、より良い方法があります。xhtml strict DOCTYPE を使用すると仮定します。margin:0,auto プロパティと必要な幅 (px) を body タグに設定します。コンテンツはページの中央に配置されます。
于 2008-11-16T19:50:32.370 に答える
1
... div を中央に配置する CSS ヘルプのようです ...
<style>
.monitor {
position:fixed;/* ... absolute possible if on :root */
top:0;bottom:0;right:0;left:0;
visibility:hidden;
}
.wrapper {
width:200px;/* this is size range */
height:100px;
position:absolute;
left:50%;top:50%;
visibility:hidden;
}
.content {
position:absolute;
width: 100%;height:100%;
left:-50%;top:-50%;
visibility:visible;
}
</style>
<div class="monitor">
<div class="wrapper">
<div class="content">
... so you hav div 200px*100px on center ...
</div>
</div>
</div>
于 2012-03-01T00:21:40.003 に答える
1
また、このコードを使用することもできます:
var divID = document.getElementById("divid");
var h = divID.style.pixelHeight;
于 2009-03-25T11:24:32.067 に答える
0
フレックス
<div>画面中央に何らかのポップアップメッセージを表示したい場合は、サイズを読み取る必要はありませんが、 flex<div>を使用できます
.box {
width: 50px;
height: 20px;
background: red;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
position: fixed; /* remove this in case there is no content under div (and remember to set body margins to 0)*/
}<div class="container">
<div class="box">My div</div>
</div>于 2020-08-19T20:39:58.693 に答える