ඕෆ්සෙට් ක්රමය
offset ක්රමය මඟින්
ලේඛනයට සාපේක්ෂව මූලද්රව්යයේ පිහිටුම ලබා ගැනීමට ඉඩ සලසයි,
position ක්රමය මෙන් නොව,
එය මාපියයාගේ කෙළවරට සාපේක්ෂව ඛණ්ඩාංක ලබා ගනී. offset ක්රමය වඩාත්
ප්රයෝජනවත් වන්නේ නව මූලද්රව්යයක් පවතින මූලද්රව්යයක් මත පිහිටුවීම සඳහා සර්ව ගෝලීය ක්රියාමාර්ග සඳහා,
උදාහරණයක් ලෙස ඇදගෙන යාම (drag-and-drop) ක්රියාත්මක කිරීම සඳහා.
එහි ප්රතිඵලයක් ලෙස, ක්රමය වස්තුවක් ආපසු ලබා දෙයි,
එහි top සහ left ගුණාංග අඩංගු වේ.
පරිශීලකයා පිටුවේ ප්රමාණ වෙනස් කළහොත් ගණනය කිරීම් වල දෝෂ ඇති විය හැක.
එසේම ක්රමය සැඟවුණු මූලද්රව්යවල ඛණ්ඩාංක ලබා නොගනී.
වාක්ය රීතිය
වර්තමාන ඛණ්ඩාංක ලබා ගන්න. සමහර අවස්ථාවලදී ලබාගත් අගයන් භාගික විය හැක:
$(තෝරන්නා).offset();
මූලද්රව්යයේ ඛණ්ඩාංක වෙනස් කිරීමට, අවශ්යයි
top සහ left ගුණාංග අඩංගු වස්තුවක් සම්පූර්ණ කිරීමට:
$(තෝරන්නා).offset({top: 40, left: 40});
එසේම අපට නිශ්චිත ශ්රිතයක් සමූහයේ ඇති සෑම මූලද්රව්යයකටම යොදාගත හැක.
මෙම අවස්ථාවේදී පළමු පරාමිතිය ලෙස ශ්රිතයට
සමූහයේ මූලද්රව්යයේ අංකය ලැබෙන අතර, දෙවන පරාමිතිය
ලෙස top සහ left ඛණ්ඩාංක සහිත වස්තුව ලැබේ.
ශ්රිතය තුළ this වත්මන් මූලද්රව්යයට යොමු කරයි.
මූලද්රව්යයේ ඛණ්ඩාංක අගයන් වෙනස් වන්නේ ශ්රිතය
ආපසු ලබා දෙන ඒවාට:
$(තෝරන්නා).width(function(සමූහයේ අංකය, {වත්මන් ඛණ්ඩාංක}));
උදාහරණය
අපි ඩිව් එකක (හරිත චතුරස්රය) පිහිටීම ලබා ගනිමු,
offset ක්රමය භාවිතා කරමින්, ඉන්පසු, ලබාගත්
වස්තුවේ යතුරු වෙත පිවිසීමෙන්, මෙම
තොරතුරු ප්රදර්ශනය කරමු:
<div id="result">වර්ගයක් ක්ලික් කරන්න ...</div>
<div id="test"></div>
#test {
position: absolute;
top: 40px;
left: 40px;
width: 100px;
height: 100px;
background: green;
color: white;
margin-top: 10px;
cursor: pointer;
}
$('*', document.body).click(function(event) {
let offset = $(this).offset();
event.stopPropagation();
$('#result').text('වම: ' + offset.left + ', ඉහළ: ' + offset.top);
});
උදාහරණය
අපි දෙවන ඡේදයේ ඛණ්ඩාංක වෙනස් කරමු:
<p style="margin-left: 10px;">text1</p>
<p style="margin-left: 10px;">text2</p>
$('p').last().offset({top: 40, left: 60});
මෙයද බලන්න
-
positionක්රමය,
එය මූලද්රව්යයේ වත්මන් ඛණ්ඩාංක ලබා ගැනීමට ඉඩ සලසයි -
offsetParentක්රමය,
එය මූලද්රව්යයේ ආසන්නතම ස්ථානගත කරන ලද පූර්වජයා ලබා ගැනීමට ඉඩ සලසයි -
cssක්රමය,
එය මූලද්රව්යයේ CSS විලාසිතා ලබා ගැනීමට හා වෙනස් කිරීමට ඉඩ සලසයි
