getComputedStyle() পদ্ধতি একটি অবজেক্ট দেয় যা লক্ষ্য উপাদানে প্রয়োগ করা সমস্ত শৈলী অন্তর্ভুক্ত করে।
উদাহরণ
নিম্নলিখিত উদাহরণগুলি ব্যাখ্যা করে কিভাবে আমরা জাভাস্ক্রিপ্ট ব্যবহার করে CSS ভেরিয়েবল পেতে এবং সেট করতে পারি।
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 4%;
padding: 4%;
width: 50%;
text-align: center;
background-color: powderblue;
border-radius: 4%;
}
</style>
</head>
<body>
<div>Test Div</div>
<span></span>
<script>
let element = document.querySelector('div');
let getStyle = window.getComputedStyle(element);
document.querySelector('span').textContent = ('background-color: ' + getStyle.getPropertyValue('background-color') + '.');
</script>
</body>
</html> আউটপুট
এটি নিম্নলিখিত ফলাফল তৈরি করবে -
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
margin: 4%;
padding: 4%;
width: 20vh;
height: 20vh;
box-shadow: inset 0 0 23px cadetblue;
border: 2px groove green;
border-radius: 50%;
}
</style>
</head>
<body>
<div><div></div></div>
<span></span>
<script>
let element = document.querySelector('div');
let getStyle = window.getComputedStyle(element);
document.querySelector('span').textContent = ('box-shadow: ' + getStyle.getPropertyValue('box-shadow') + '.');
</script>
</body>
</html> আউটপুট
এটি নিম্নলিখিত ফলাফল তৈরি করবে -
