javascript অবজ কিভাবে জাভাস্ক্রিপ্ট মধ্যে DOM উপাদান একটি বর্গ যোগ করতে?




জাভাস্ক্রিপ্ট বাংলা বই (7)

এছাড়াও একটি চেহারা গ্রহণ মূল্য

var el = document.getElementById('hello');
  if(el) {
    el.className += el.className ? ' someClass' : 'someClass';
  }

কিভাবে div জন্য একটি ক্লাস যোগ করবেন?

var new_row = document.createElement('div');

new_row.className = "aClassName";

MDN সম্পর্কে আরো তথ্য Heres: className


জাভাস্ক্রিপ্টে এটি করার DOM উপায় রয়েছে:

// Create a div and set class
var new_row = document.createElement("div");
new_row.setAttribute("class", "aClassName" );
// Add some text
new_row.appendChild( document.createTextNode("Some text") );
// Add it to the document body
document.body.appendChild( new_row );

.classList.add() পদ্ধতিটি ব্যবহার করুন:

const element = document.querySelector('div.foo');
element.classList.add('bar');
console.log(element.className);
<div class="foo"></div>

className সম্পত্তিটি ওভাররাইট করার পদ্ধতিটি এই পদ্ধতিটি আরও ভাল, কারণ এটি অন্য ক্লাসগুলি সরাতে না পারে এবং যদি উপাদানটি ইতিমধ্যেই থাকে তবে তা ক্লাস যোগ করে না।

আপনি element.classList ব্যবহার করে ক্লাস টগল করতে বা অপসারণ করতে পারেন ( MDN ডক্স দেখুন )।


এখানে ফাংশন পদ্ধতির ব্যবহার করে কাজ সোর্স কোড।

<html>
<head>
    <style>
        .news{padding:10px; margin-top:2px;background-color:red;color:#fff;}
    </style>
</head>
<body>
<div id="dd"></div>
<script>
        (function(){   
            var countup = this;
            var newNode = document.createElement('div');
            newNode.className = 'textNode news content';
            newNode.innerHTML = 'this created div contains class while created!!!';
            document.getElementById('dd').appendChild(newNode);           
        })();
    </script>
</body>
</html>

উদাহরণস্বরূপ file ধরন সহ নতুন ইনপুট ক্ষেত্র তৈরি করতে চান

 // Create new Input with type file and id='file-input'
 var newFileInput = document.createElement('input');

 // New input file will have type file
 newFileInput.type = "file"; 

 // New input file will have class="w-95 mb-1" (width - 95%, margin-bottom: .25rem)
 newFileInput.className = "w-95 mb-1"

আউটপুট হবে: <input type="file" class="w-95 mb-1">

আপনি জাভাস্ক্রিপ্ট ব্যবহার করে একটি নেস্টেড ট্যাগ তৈরি করতে চান, সহজতম উপায় অভ্যন্তরীণ innerHtml সঙ্গে

var tag = document.createElement("li");
tag.innerHTML = '<span class="toggle">Jan</span>';

আউটপুট হবে:

<li>
    <span class="toggle">Jan</span>
</li>

var newItem = document.createElement('div');
newItem.style = ('background-color:red'); 
newItem.className = ('new_class');
newItem.innerHTML = ('<img src="./profitly_files/TimCover1_bigger.jpg" width=50 height=50> some long text with ticker $DDSSD');
var list = document.getElementById('x-auto-1');
list.insertBefore(newItem, list.childNodes[0]);




dom