জকিউরি ব্যবহার না করে কীভাবে নথির উচ্চতা এবং প্রস্থ পাবেন get


112

খাঁটি দস্তাবেজের উচ্চতা এবং প্রস্থ কীভাবে পাবেন অর্থাত্ ব্যবহার না করেই
আমি সম্পর্কে জানি $(document).height()এবং $(document).width()আমি এইটি করতে চাই

আমি পৃষ্ঠার উচ্চতা এবং প্রস্থ বোঝাতে চাইছি।


উত্তর:


119
var height = document.body.clientHeight;
var width = document.body.clientWidth;

চেক করুন: আরও ভাল ব্যাখ্যা জন্য এই নিবন্ধ


9
এটি ক্রস ব্রাউজার নয়। এটি পোস্ট করার আগে আপনার এটি পরীক্ষা করা উচিত ছিল।

12
@ ইওয়াজারু তা উল্লেখ করার জন্য ধন্যবাদ দেখে মনে হচ্ছে 4 বছরের পুরানো উত্তরটি বুলেটপ্রুফ নয় :)
ডাম্ব

2
দেখে মনে হচ্ছে এটি ক্রস ব্রাউজার
MAChitgarha

যদি কোনও ওয়েবসাইটের একটি সীমানা থাকে তবে এটি সমাধান সহ প্রস্থটি সরিয়ে দেয় তবে jQuery সমাধান নয়। শরীরের সীমানা হওয়া অসম্ভব তবে জানা দরকার worth window.innerWidthএটি সমাধান করে
ব্রিটিশস্যাম

এটি ব্রাউজার উইন্ডোটির উচ্চতা (যদি আপনি ব্রাউজারের উচ্চতাটি পরিবর্তন করে তবে এটি পরিবর্তন করে) ফেরত দেয়, সামগ্রী / ওয়েবপৃষ্ঠার উচ্চতা নয়।
র‌্যাডমেশন

56

এমনকি http://www.howtocreate.co.uk/tutorials/ জাভাস্ক্রিপ্ট / ব্রাউজার উইন্ডোতে দেওয়া সর্বশেষ উদাহরণটি কুইর্কস মোডে কাজ করছে না। আমি যা ভাবি তার থেকে সহজতর, এটি সমাধান বলে মনে হয় (সর্বশেষ জ্যাকোয়ারি কোড থেকে নেওয়া):

Math.max(
    document.documentElement["clientWidth"],
    document.body["scrollWidth"],
    document.documentElement["scrollWidth"],
    document.body["offsetWidth"],
    document.documentElement["offsetWidth"]
);

উচ্চতা পেতে কেবল "উচ্চতা" এর প্রস্থকে প্রতিস্থাপন করুন।


1
এটি সঠিক উত্তর হওয়া উচিত। ক্লায়েন্টউইথের সর্বদা সঠিক মান থাকে না।
ওয়াইল্ডহ্যামার

ক্লায়েন্টউইথের সাথে সমস্যা হ'ল এটি কেবল দেখা যায়। স্ক্রোলউইথের মধ্যে পর্দা ফাঁস হওয়া জিনিসগুলি অন্তর্ভুক্ত রয়েছে। কমপক্ষে, এটি আমার ক্রোম পরীক্ষাগুলির জন্য 2019-এ সত্য
স্টেইকুল

@ স্টকুল দেখে মনে হচ্ছে সর্বাধিক সাম্প্রতিক jQuery এখনও নথির উচ্চতা / প্রস্থ গণনার জন্য এই পদ্ধতিটি ব্যবহার করছে এবং এটি একই ফলাফল দেয় $(document).width()$(window).width()খাঁটি জেএস-এ কেবল document.documentElement["clientWidth"]আধুনিক ব্রাউজারগুলিতে থাকা এমন কোনও কিছুর পরে আপনি সম্ভবত রয়েছেন।
ড্যান

38

এটি একটি ক্রস ব্রাউজার সমাধান:

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

এটি করা একটি সুরক্ষিত এবং নির্ভুল জিনিস
Nan Zhou

1
এটি ডকুমেন্টের উচ্চতা এবং প্রস্থ নয়, উইন্ডোটির উচ্চতা এবং প্রস্থকে ফিরিয়ে দিচ্ছে
মাইকেল

25

আপনার getBoundingClientRectসাধারণত ব্যবহার করা উচিত কারণ এটি ক্রস ব্রাউজার হিসাবে কাজ করে এবং আপনাকে সীমানার আয়তক্ষেত্রে সাব-পিক্সেল যথার্থতা দেয় ।

elem.getBoundingClientRect()

1
সমর্থন সম্পর্কে যারা ভাবছেন তাদের জন্য: caniuse.com/#feat=getboundingclientrect
মাইক গ্লিসন জুনিয়র

আমি যখন এটি ডকুমেন্টে ব্যবহার করেছি তখন 0 টির উচ্চতা ফিরে আসে
মাইকেল

সম্ভবত আপনার দেহের উচ্চতা ০. কারণ আপনি যদি এর প্রদর্শন ধরণটি পরিবর্তন না করেন তবে এটি ডিফল্টরূপে। এটি ডিওএম ইন্সপেক্টরের কাছে পরীক্ষা করুন।
এরিক অাইগনার

11

JQuery ছাড়াই নথির আকার পান

document.documentElement.clientWidth
document.documentElement.clientHeight

এবং আপনার যদি স্ক্রিন সাইজের প্রয়োজন হয় তবে এটি ব্যবহার করুন

screen.width
screen.height

8

আপনিও চেষ্টা করতে পারেন:

document.body.offsetHeight
document.body.offsetWidth

1
এগুলি উইন্ডো পুনরায় আকারের ইভেন্টগুলির মতো জিনিসগুলিতে ব্যবহার করতে সাবধান হন। তাদের উচ্চতা এবং প্রস্থ গণনা করতে হবে, যা কিছুটা সময় নেয়।
মাইলস

8

এটি সমস্ত ব্রাউজার / ডিভাইসের জন্য কাজ করা উচিত:

function getActualWidth()
{
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}

উইন্ডো.নিরউইথথই একমাত্র এটি সঠিক যে যখন Chrome সরঞ্জামগুলিতে Chrome এ খোলা থাকে
অ্যালেক্স


1

কীভাবে খুব সহজে ডকুমেন্টের প্রস্থ এবং উচ্চতা সন্ধান করবেন?

এইচটিএমএলে
<span id="hidden_placer" style="position:absolute;right:0;bottom:0;visibility:hidden;"></span>

জাভাস্ক্রিপ্টে

     var c=document.querySelector('#hidden_placer');

     var r=c.getBoundingClientRect();
     r.right=document width
     r.bottom=document height`

আপনি প্রয়োজন হলে প্রতিটি উইন্ডোর পুনরায় আকারের ইভেন্টে এটি আপডেট করতে পারেন।


0

windowপুরো ব্রাউজারের অ্যাপ্লিকেশন উইন্ডো। documentওয়েবপৃষ্ঠাটি দেখানো হয়েছে যা আসলে লোড হয়েছে।

window.innerWidthএবং window.innerHeightস্ক্রোলবারগুলি অ্যাকাউন্টে নেবে যা আপনি যা চান তা নাও পারে।

document.documentElementশীর্ষস্থানীয় স্ক্রোলবার ছাড়া সম্পূর্ণ ওয়েবপৃষ্ঠা। document.documentElement.clientWidthy স্ক্রোলবার ছাড়াই নথির প্রস্থের আকার দেয়। document.documentElement.clientHeightএক্স স্ক্রোলবার ছাড়াই দস্তাবেজের উচ্চতার আকার প্রদান করে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.