ایتا - جاوااسکریپت یار #box

جاوااسکریپت یار
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>جلسه دهم - DOM</title>
    <style>
        body { font-family: Tahoma; padding: 20px; transition: background 0.5s; }
        #box { 
            width: 300px; 
            height: 100px; 
            background: #f0f0f0; 
            padding: 20px; 
            margin-top: 20px;
            border: 2px solid #333;
        }
        button { 
            padding: 10px 20px; 
            font-size: 16px; 
            cursor: pointer;
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <h1>🛠️ کار با DOM</h1>

    <div id="box">متن اولیه</div>
    <br>
    <button id="changeTextBtn">تغییر متن</button>
    <button id="changeStyleBtn">تغییر استایل</button>
    <button id="addElementBtn">افزودن المان جدید</button>

    <script>
        // ۱. پیدا کردن المان‌ها
        let box = document.getElementById("box");
        let textBtn = document.getElementById("changeTextBtn");
        let styleBtn = document.getElementById("changeStyleBtn");
        let addBtn = document.getElementById("addElementBtn");

        // ۲. رویداد تغییر متن
        textBtn.addEventListener("click", function() {
            box.textContent = "متن تغییر کرد! 🎉";
            box.style.color = "green";
        });

        // ۳. رویداد تغییر استایل
        styleBtn.addEventListener("click", function() {
            box.style.backgroundColor = "#ffeb3b"; // زرد
            box.style.borderRadius = "10px";
            box.style.fontSize = "20px";
        });

        // ۴. رویداد افزودن المان جدید
        addBtn.addEventListener("click", function() {
            let newP = document.createElement("p");
            newP.textContent = "این یک پاراگراف جدید است که با JS اضافه شد.";
            newP.style.color = "blue";
            newP.style.fontWeight = "bold";
            
            // اضافه کردن به انتهای box
            box.appendChild(newP);
        });
    </script>

</body>
</html>

کد نهایی جلسه دهم برای تمرین

eitaa.com/Pythonfriend
1 مشاهده12:12
پرسش‌ها

قوانین

داغ‌ترین‌ها

چندسکویی
