ব্যাখ্যা মধ্যে পার্থক্য কি চিন্তা offsetHeight, clientHeightএবং scrollHeightঅথবা offsetWidth, clientWidthএবং scrollWidth?
ক্লায়েন্ট পক্ষের কাজ করার আগে একজনকে অবশ্যই এই পার্থক্যটি জানতে হবে। অন্যথায় তাদের জীবনের অর্ধেকটি ইউআই স্থির করতে ব্যয় করবে।
ভাঁজ বা নীচের ইনলাইন:
function whatis(propType) {
var mainDiv = document.getElementById("MainDIV");
if (window.sampleDiv == null) {
var div = document.createElement("div");
window.sampleDiv = div;
}
div = window.sampleDiv;
var propTypeWidth = propType.toLowerCase() + "Width";
var propTypeHeight = propType + "Height";
var computedStyle = window.getComputedStyle(mainDiv, null);
var borderLeftWidth = computedStyle.getPropertyValue("border-left-width");
var borderTopWidth = computedStyle.getPropertyValue("border-top-width");
div.style.position = "absolute";
div.style.left = mainDiv.offsetLeft + Math.round(parseFloat((propType == "client") ? borderLeftWidth : 0)) + "px";
div.style.top = mainDiv.offsetTop + Math.round(parseFloat((propType == "client") ? borderTopWidth : 0)) + "px";
div.style.height = mainDiv[propTypeHeight] + "px";
div.style.lineHeight = mainDiv[propTypeHeight] + "px";
div.style.width = mainDiv[propTypeWidth] + "px";
div.style.textAlign = "center";
div.innerHTML = propTypeWidth + " X " + propTypeHeight + "( " +
mainDiv[propTypeWidth] + " x " + mainDiv[propTypeHeight] + " )";
div.style.background = "rgba(0,0,255,0.5)";
document.body.appendChild(div);
}
document.getElementById("offset").onclick = function() {
whatis('offset');
}
document.getElementById("client").onclick = function() {
whatis('client');
}
document.getElementById("scroll").onclick = function() {
whatis('scroll');
}#MainDIV {
border: 5px solid red;
}<button id="offset">offsetHeight & offsetWidth</button>
<button id="client">clientHeight & clientWidth</button>
<button id="scroll">scrollHeight & scrollWidth</button>
<div id="MainDIV" style="margin:auto; height:200px; width:400px; overflow:auto;">
<div style="height:400px; width:500px; overflow:hidden;">
</div>
</div>
6
এই প্রশ্নটি অফ-টপিক হিসাবে উপস্থিত বলে মনে হচ্ছে কারণ এটি কেবল একটি টিপ সরবরাহ করে। একমাত্র প্রশ্নটি 'প্রশ্ন' শিরোনামে।
—
enhzflep
