戻る

divタグの幅の取得
getComputedStyleで値を取得

[サンプル]

要素の幅を取得するには getComputedStyle(element).widthのように取得します。
div width

copy
const test1 = document.getElementById('test1');
const width = getComputedStyle(test1).width;
console.log("width:"+width);
const result1 = document.getElementById('result1');
result1.innerText = width;

getComputedStyleで取得できる値は、要素のスタイルを適用した後の最終的な値です。
数字として計算をする場合はparseIntを使ってください。
小数点として使用する場合はparseFloatとなります。
style.widthは、要素に直接設定されたstyle属性の値を参照します。
CSSでwidthが設定されている場合、style.widthで取得できる値は空文字列になる可能性があります。

[幅を変更するサンプル]
要素の幅を取得するには getComputedStyle(element).widthのように取得します。




copy
const btn1 = document.getElementById("btn1");
btn1.addEventListener("click", () => 
{
	const test2 = document.getElementById('test2');
	test2.style.width = 150+"px";
});



戻る
back

Get the width of a div tag
Get the value with getComputedStyle

[sample]

To get the width of an element, use getComputedStyle(element).width.
div width

copy
const test1 = document.getElementById('test1');
const width = getComputedStyle(test1).width;
console.log("width:"+width);
const result1 = document.getElementById('result1');
result1.innerText = width;

The value returned by getComputedStyle is the final value after applying the element's styles.
Use parseInt to calculate as a number.
Use parseFloat to use as a decimal point.
style.width refers to the value of the style attribute set directly on the element.
If the width is set in CSS, the value returned by style.width may be an empty string.

[Sample of changing width]
To get the width of an element, use getComputedStyle(element).width.




copy
const btn1 = document.getElementById("btn1");
btn1.addEventListener("click", () => 
{
	const test2 = document.getElementById('test2');
	test2.style.width = 150+"px";
});



back



著作権情報
ホームページおよプリ等に掲載されている情報等については、いかなる保障もいたしません。
ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、
または公開したりすることはできません。
当方は、ホームペーよびアプリ利用したいかなる理由によっての障害等が発生しても、
その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について
一切の責任を負わないものとします。