HTML DOM Element offsetWidth အရေးပါချက်

အသုံးချက် နှင့် အပြုအရင်

offsetWidth အရေးပါချက် သည် အဆိုပါ အခွင့်အရေး သည် ပြင်ကျပ် ပေါ် ဖြင့် ဖော်ထုတ်ကြသည် (ပမာဏ အားဖြင့်) နှင့် အတိုင်းအတာ ဖြင့် ပါဝင်သည် သို့မဟုတ် အတိုင်းအတာ သည် ဖြင့် ပါဝင်သည် သို့မဟုတ် အခွင့်အရေး သည် ဖြင့် ပါဝင်သည် နှင့် ပြင်ကျပ် အခွင့်အရေး မပါဝင်သည်

offsetWidth အရေးပါချက် သည် သာသာသာ ဖြစ်သည်

တုံ့ပြန်ရန်:CSS ပုံစံ အဆိုပါ အခွင့်အရေး အခွင့်အရေး

offsetParent

အသုံးပြုကြသော အချက်အလက် အရ အကား နှင့် အကျယ်အဝန်း အပေါ် အောက် ချွတ်ဆုံး ချော်ဆိုချက် ကို ဖော်ထုတ်ကြသည်

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

ချွတ်ဆုံး ချော်ဆိုချက် သို့ ချွတ်ဆုံး ချော်ဆိုချက် ကို ဖော်ထုတ်ကြသည်

ချွတ်ဆုံး ချော်ဆိုချက် မရှိဘဲ အရွယ်အစား ကို စာတမ်းသတင်းအုပ် အတွက် အတိုင်းအတာ ဖြင့် ဖော်ထုတ်ကြသည်。

တုံ့ပြန်ရန်:

offsetHeight အရေးပါချက်

offsetParent အရေးပါချက်

offsetTop အရေးပါချက်

offsetLeft အရေးပါချက်

clientTop အရေးပါချက်

clientLeft အရေးပါချက်

clientWidth အရေးပါချက်

clientHeight အရေးပါချက်

အကြောင်းကြား

အကြောင်းကြား 1

ရှာဖွေ "myDIV" အကား နှင့် အကျယ်အဝန်း အပေါ် အောက် ပတ်ဝန်းကျင် နှင့် ပတ်ဝန်းကျင်ကို

const elmnt = document.getElementById("myDIV");
let text = "အကား နှင့် ပတ်ဝန်းကျင် ထိပ်ဝိုင်း: " + elmnt.offsetHeight + "ပမာဏ<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

亲自试一试

例子 2

clientHeight/clientWidth 与 offsetHeight/offsetWidth 的区别

不带滚动条：

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px
";
text += "Height with padding and border: " + elmnt.offsetHeight + "px
";
text += "Width with padding: " + elmnt.clientWidth + "px
";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

亲自试一试

带滚动条：

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px
";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px
";
text += "Width with padding: " + elmnt.clientWidth + "px
";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

亲自试一试

语法

element.offsetWidth

返回值

类型 描述
数字 元素的可视宽度（以像素计），包括内边距、边框和滚动条。

ဘတ်ကဲ ထောက်ပံ့

အားလုံး ဘတ်ကဲ ကူညီ element.offsetWidth：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့