উপাদানগুলির শৈলীর সংশোধন করা সহজ তবে মানটি পড়ার জন্য কৌশলপূর্ণ y
জাভাস্ক্রিপ্ট সিএসএস (অভ্যন্তরীণ / বাহ্যিক) থেকে আগত কোনও উপাদান শৈলীর সম্পত্তি (ইলেম.স্টাইল) পড়তে পারে না যদি আপনি জাভাস্ক্রিপ্টে বিল্ট ইন মেথড কল গেটকম্পিউডস্টাইল ব্যবহার না করেন।
getComputesStyle (উপাদান [, ছদ্ম]]
উপাদান: মানটি পড়ার উপাদান।
সিউডো: প্রয়োজনে একটি সিউডো-উপাদান, উদাহরণস্বরূপ :: আগে। একটি খালি স্ট্রিং বা কোনও যুক্তি মানে উপাদান নিজেই।
ফলাফল হ'ল স্টাইলের মতো স্টাইলের বৈশিষ্ট্যযুক্ত একটি বস্তু, তবে এখন সমস্ত সিএসএস শ্রেণিতে সম্মান।
উদাহরণস্বরূপ, এখানে স্টাইলটি মার্জিনটি দেখতে পাচ্ছে না:
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// now we can read the margin and the color from it
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>
সুতরাং আপনার জাভাস্ক্রিপ্ট কোডটি পরিমার্জন করে আপনি যে উপাদানটির প্রস্থ / উচ্চতা বা অন্যান্য বৈশিষ্ট্য পেতে চান তার গেটকম্পটেড স্টাইল অন্তর্ভুক্ত করুন
window.onload = function() {
var test = document.getElementById("test");
test.addEventListener("click", select);
function select(e) {
var elementID = e.target.id;
var element = document.getElementById(elementID);
let computedStyle = getComputedStyle(element);
var width = computedStyle.width;
console.log(element);
console.log(width);
}
}
গণিত এবং সমাধান করা মান
সিএসএসে দুটি ধারণা রয়েছে:
সিএসএস ক্যাসকেডের ফলস্বরূপ সমস্ত সিএসএস বিধি এবং সিএসএস উত্তরাধিকার প্রয়োগের পরে একটি গণিত শৈলীর মান। এটি উচ্চতার মতো দেখতে পারে: 1 মিমি বা হরফ আকার: 125%।
একটি সমাধান করা শৈলীর মান হ'ল শেষ পর্যন্ত উপাদানটিতে প্রয়োগ করা। 1 ম বা 125% এর মতো মানগুলি আপেক্ষিক। ব্রাউজারটি গণিত মান গ্রহণ করে এবং সমস্ত ইউনিটকে স্থির ও নিখুঁত করে তোলে, উদাহরণস্বরূপ: উচ্চতা: 20px বা ফন্ট-আকার: 16px। জ্যামিতির বৈশিষ্ট্যগুলির জন্য সমাধান হওয়া মানগুলির প্রস্থ: 50.5px এর মতো একটি ভাসমান পয়েন্ট থাকতে পারে।
একটি দীর্ঘ সময় আগে getComputesStyle গণিত মান পেতে তৈরি করা হয়েছিল, কিন্তু দেখা গেল যে সমাধান করা মানগুলি আরও বেশি সুবিধাজনক এবং মান পরিবর্তিত হয়েছে।
সুতরাং আজকাল getComputesStyle প্রকৃতপক্ষে সম্পত্তিটির সমাধান করা মান প্রদান করে।
দয়া করে নোট করুন:
getComputesStyle এর সম্পূর্ণ সম্পত্তির নাম প্রয়োজন
প্যাডিং লেফট বা উচ্চতা বা প্রস্থের মতো আপনি যা চান ঠিক তার জন্য আপনার জিজ্ঞাসা করা উচিত। অন্যথায় সঠিক ফলাফল গ্যারান্টিযুক্ত হয় না।
উদাহরণস্বরূপ, যদি লেডিং / প্যাডিংপপ বৈশিষ্ট্যগুলি থাকে, তবে আমাদের getComputesStyle (এলেম) .প্যাডিংয়ের জন্য কী পাওয়া উচিত? কিছুই নেই, বা সম্ভবত পরিচিত প্যাডিংস থেকে একটি "উত্পন্ন" মান? এখানে কোনও মান নিয়ম নেই।
অন্যান্য অসঙ্গতি রয়েছে। উদাহরণ হিসাবে, কিছু ব্রাউজার (ক্রোম) নীচের দস্তাবেজে 10px দেখায়, এবং তাদের মধ্যে কিছু (ফায়ারফক্স) - এটি করে না:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
আরও তথ্যের জন্য https://javascript.info/styles-and- ক্লাসগুলি