getComputedStyle() পদ্ধতি একটি অবজেক্ট দেয় যা লক্ষ্য উপাদানে প্রয়োগ করা সমস্ত শৈলী অন্তর্ভুক্ত করে। getPropertyValue() পদ্ধতিটি গণনা করা শৈলী থেকে পছন্দসই সম্পত্তি পেতে ব্যবহৃত হয়। setProperty() CSS ভেরিয়েবলের মান পরিবর্তন করতে ব্যবহৃত হয়।
উদাহরণ
নিম্নলিখিত উদাহরণগুলি ব্যাখ্যা করে কিভাবে আমরা জাভাস্ক্রিপ্ট ব্যবহার করে CSS ভেরিয়েবল পেতে এবং সেট করতে পারি।
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--outerColor: magenta;
--innerColor: lightgreen;
text-align: center;
}
div {
margin: 5%;
padding: 10%;
background-color: var(--innerColor);
border: 2px groove var(--outerColor);
}
</style>
</head>
<body>
<div onmouseover="showColor()" onmouseout="changeColor()">
<p></p>
</div>
</body>
<script>
let ele = document.querySelector(':root');
let para = document.querySelector('p');
function showColor() {
let cs = getComputedStyle(ele);
para.textContent = ("Previously " + cs.getPropertyValue('--innerColor') + " color");
}
function changeColor() {
let item = document.querySelector('div');
item.style.setProperty('--innerColor', 'magenta')
}
</script>
</html> আউটপুট
এটি নিম্নলিখিত ফলাফল তৈরি করবে -
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--customColor: seagreen;
}
div {
margin: 5%;
width: 130px;
height: 130px;
box-shadow: inset 0 0 38px var(--customColor);
border-radius: 50%;
}
</style>
</head>
<body>
<div onmouseover="toggle()"></div>
</body>
<script>
let ele = document.querySelector(':root');
function toggle() {
let cs = getComputedStyle(ele);
let item = document.querySelector('div');
if(cs.getPropertyValue('--customColor') !== 'blue') {
item.style.setProperty('--customColor', 'blue')
}
}
</script>
</html> আউটপুট
এটি নিম্নলিখিত ফলাফল তৈরি করবে -
