HTML DOM className প্রপার্টিটি একটি HTML এলিমেন্টে একটি css ক্লাস বরাদ্দ করতে ব্যবহৃত হয়। ClassName প্রপার্টিটি একটি এলিমেন্টের ক্লাস নেম অ্যাট্রিবিউট ভ্যালু সেট বা রিটার্ন করার জন্য ব্যবহার করা হয়। যদি কোনো শ্রেণী HTML উপাদানের সাথে যুক্ত না থাকে, তাহলে একটি খালি স্ট্রিং ফেরত দেওয়া হয়। আমরা এই বৈশিষ্ট্য −
ব্যবহার করে একটি উপাদান সহ একটি শ্রেণীর নাম পরিবর্তন করতে পারিসিনট্যাক্স
−
-এর সিনট্যাক্স নিচে দেওয়া হলclassName প্রপার্টি −
সেট করা হচ্ছেHTMLElementObject.className = class;
এখানে, ক্লাস মান একটি উপাদানের ক্লাস নাম নির্দিষ্ট করতে ব্যবহৃত হয়। একটি উপাদান স্পেস দ্বারা বিভক্ত এর সাথে যুক্ত একাধিক শ্রেণী থাকতে পারে।
উদাহরণ
আসুন HTML DOM className প্রপার্টি -
-এর একটি উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<style>
.firstDiv {
width: 300px;
height: 100px;
background-color:lightgreen;
}
.secondDiv{
color: red;
border:solid 1px blue;
margin-bottom:9px;
}
</style>
</head>
<body>
<p>Click the below button to display the class attribute value of the div </p>
<div id="myDIV" class="firstDiv secondDiv">
This is a sample div element.
</div>
<button onclick="getClassName()">GET CLASS</button>
<p id="Sample"></p>
<script>
function getClassName() {
var x = document.getElementById("myDIV").className;
document.getElementById("Sample").innerHTML ="The classNames with the div element
are "+x;
}
</script>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
GET CLASS বোতামে ক্লিক করলে -
উপরের উদাহরণে -
আমরা “myDIV” আইডি দিয়ে একটি ডিভি তৈরি করেছি এবং এতে কিছু টেক্সট রয়েছে −
<div id="myDIV" class="firstDiv secondDiv"> This is a sample div element. </div>
তারপরে আমরা একটি GET CLASS বোতাম তৈরি করেছি যা getClassName() মেথডটি ক্লিক −
চালাবে।<button onclick="getClassName()">GET CLASS</button>
getClassName() মেথড getElementById() মেথড ব্যবহার করে
function getClassName() {
var x = document.getElementById("myDIV").className;
document.getElementById("Sample").innerHTML ="The classNames with the div element are "+x;
} 