জাভাস্ক্রিপ্ট জেকুয়েরি এঙ্গুলার জেএস এইচটিএমএল সিএসএস বুটস্ট্রাপ পিএইচপি সি প্রোগ্রামিং
ফোরাম
×

জেএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction ব্যবহার-Uses গঠনপ্রণালী-Syntax আউটপুট-Output তথ্যের ধরণ-Data Type চলক-Variable স্টেটমেন্ট-Statement মন্তব্য-Comment অপারেটর-Operator গণিত-Arithmetic এসাইনমেন্ট-Assignment ফাংশন-Function অবজেক্ট-Object স্কোপ-Scope ইভেন্ট-Event ধরণ পরিবর্তন-Type Conversion রেগুলার এক্সপ্রেশন-RegExp ভুল-Error জেসন-JSON হয়েস্টিং-Hoisting

কন্ট্রোল স্টেটমেন্ট

বুলিয়ান-Boolean তুলনা-Comparison শর্তাবলী-Condition সুইচ-Switch ফর লুপ- For Loop হোয়াইল লুপ-While Loop ব্রেক-Break এবং কন্টিনিউ-continue

স্ট্রিং এবং অ্যারে

স্ট্রিং-String স্ট্রিং পদ্ধতি-String Method অ্যারে-Array অ্যারে পদ্ধতি -Array Method অ্যারে সর্ট-ArraySort

সংখ্যা, গণিত ও তারিখ

সংখ্যা-Number সংখ্যা পদ্ধতি-Number Method গণিত-Math তারিখ-Date তারিখ বিন্যাস-Date Format তারিখ পদ্ধতি-Date Method

জেএস ফাংশন-Function

ফাংশনের সংজ্ঞা-Definition ফাংশন প্যারামিটার-Parameter ফাংশনকে ডাকা-Invocation ফাংশন ক্লোজার-Closure

জেএস অবজেক্ট-Object

অবজেক্টের সংজ্ঞা-Definition অবজেক্ট প্রোপার্টি-Property অবজেক্ট মেথড-Method অবজেক্ট প্রোটোটাইপ-Prototype

জেএস ফর্ম-Form

ফর্ম বৈধকরণ-Validation ফর্ম এপিআই-API

জেএস এইচটিএমএল ডোম-DOM

ডোম(DOM) পরিচিতি ডোম মেথড-Method ডোম ডকুমেন্ট-Document ডোম এলিমেন্ট -Element ডোম এইচটিএমএল-HTML ডোম সিএসএস-CSS ডোম অ্যানিমেশন-Animation ডোম ঘটনা-Event ডোম ইভেন্টলিসেনার-EventListener ডোম নেভিগেশন-Navigation ডোম নোড-Node ডোম নোডতালিকা-Nodelist

জেএস ব্রাউজার বোম-BOM

উইন্ডো-Window স্ক্রিন-Screen লোকেশন-Location হিস্টোরি-History নেভিগেটর-Navigator পপআপ এলার্ট-Popup Alert টাইমিং-Timing কুকি-Cookie

জেএস রেফারেন্স

জাভাস্ক্রিপ্ট অবজেক্ট এইচটিএমএল ডোম অবজেক্ট অপারেটর-Operator স্টেটমেন্ট-Statement অ্যারে-Array বুলিয়ান-Boolean স্ট্রিং-String সংখ্যা-Number রেগুলার এক্সপ্রেশন-RegExp গণিত-Math তারিখ-Date গ্লোবাল-Global কনভার্শন-Conversion


 

জাভাস্ক্রিপ্ট এইচটিএমএল ডোম - সিএসএস পরিবর্তন


এইচটিএমএল ডোম জাভাস্ক্রিপ্টকে এইচটিএমএল এলিমেন্টের স্টাইল পরিবর্তন করতে সাহায্য করে।


এইচটিএমএলের স্টাইল পরিবর্তন

এইচটিএমএল এলিমেন্টের স্টাইল পরিবর্তন করতে নিচের সিন্টেক্স ব্যবহার করুনঃ

উদাহরণ


document.getElementById(id).style.property = new style 

নিম্নলিখিত উদাহরণে একটি <div> এলিমেন্টের স্টাইল পরিবর্তন করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<body>
<div id="div1">স্যাট একাডেমী</div>

<script>
document.getElementById("div1").style.color = "teal";
</script>

<p>উপরের এলিমেন্টের স্টাইল script দ্বারা পরিবর্তন করা হয়েছে।</p> </body> </html>

ফলাফল




ইভেন্টের ব্যবহার

কোনো ইভেন্ট ঘটলে এইচটিএমএল ডোম একটি কোড সম্পাদনে সম্মতি দেয়।

এইচটিএমএল এলিমেন্টে যখন কোনো "ঘটনা ঘটে" তখন ব্রাউজারের মাধ্যমে ইভেন্ট তৈরি হয়ঃ

  • একটি এলিমেন্টের উপর ক্লিক করা হলে
  • পেজ লোড হলে
  • ইনপুট ফিল্ড পরিবর্তিত হলে

এই টিউটোরিয়ালের পরবর্তী পরিচ্ছেদে আপনি ইভেন্ট সম্পর্কে আরো জানতে পারবেন।

এই উদাহরণে, একজন ব্যবহারকারী বাটনে ক্লিক করলে id="div1" যুক্ত এইচটিএমএল এলিমেন্টের স্টাইল পরিবর্তন করা হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<body>

<div id="div1">স্যাট একাডেমী</div>

<button type="button" onclick="document.getElementById('div1').style.color = 'teal'">
ক্লিক করুন</button>

</body>
</html>

ফলাফল




এইচটিএমএল ডোম স্টাইল অবজেক্ট রেফারেন্স

সকল এইচটিএমএল ডোম স্টাইল প্রোপার্টির জন্য আমাদের এইচটিএমএল ডোম স্টাইল অবজেক্ট রেফারেন্স দেখুন।