JavaScriptで要素の幅と高さを設定する方法

JavaScript で要素の幅と高さを設定する方法: 1. HTML 要素の幅と高さを取得します; 2. "main.style.width" と " を通じて要素の幅と高さを設定します。 main.style.height」。

この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、DELL G3 コンピューター

設定方法JavaScript で要素の幅と高さを取得しますか?

JS HTML 要素の幅と高さを取得し、幅と高さを設定します

ブラウザの幅と高さを取得します:

 var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

HTML 要素の幅と高さを取得する 2 つの方法

// 首先是取到元素
var main = document.getElementById('main');
// 第一种方式
var mainWidth = main.offsetWidth,
mainHeight = main.offsetHeight;
// 第二种方式
var mainWidth2 = main.style.width,
mainHeight2 = main.style.height;

2 つのメソッドの違いは、最初のメソッドはどのような状況でも幅と高さを取得できるのに対し、2 番目のメソッドは取得できるのはHTMLで定義された幅と高さですが、CSSで定義された幅と高さではありません。

幅と高さを設定する

main.style.width = "120px";
main.style.height = "130px";

方法はあり、唯一の方法です。次の方法は実行できません。Firefox のテストです。

main.style.offsetWidth = "120px";
main.style.offsetHeight = "130px";

推奨学習: 「JavaScript 基本チュートリアル 」

以上がJavaScriptで要素の幅と高さを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。