DOM Styling در جاوا اسکریپت

به نام خدا با عرض سلام و خسته نباشید خدمت دوستان گرامی. در راستای آموزش جاوا اسکریپت این جلسه به مبحث DOM Styling در جاوا اسکریپت خواهیم پرداخت. با ما همراه باشید.

Styling DOM Elements in JavaScript

شما می توانید با استفاده از جاوا اسکریپت استایل را بر روی عناصر HTML اعمال کنید. تا نمایش بصری اسناد HTML را به صورت پویا تغییر دهید.همچنین شما می توانید.تقریباً تمام استایل ها را برای عناصری مانند فونت ها، رنگ ها، ، حاشیه ها، تصاویر پس زمینه، تراز متن، عرض و ارتفاع، موقعیت و …تنظیم کنید.

نحوه تنظیم Inline Styles روی عناصر

استایل های درون خطی (Inline styles) با استفاده از ویژگی style به طور مستقیم به عنصر HTML خاص اعمال می شوند.در جاوا اسکریپت از ویژگی style برای بدست آوردن یا تنظیم استایل درون خطی یک عنصر استفاده می شود.

مثال زیر پراپرتی رنگ و فونت یک عنصر را با “id="intro تنظیم می کند.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Add Inline Styles to an Element</title>
</head>
<body>
    <p id="intro">This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button" onclick="setStyle()">Set intro paragraph styles</button>
      
    <script>
    function setStyle() {
        // Selecting element
        var elem = document.getElementById("intro");
         
        // Appling styles on element
        elem.style.color = "blue";
        elem.style.fontSize = "18px";
        elem.style.fontWeight = "bold";
    }
    </script>
</body>
</html>

قراردادهای نامگذاری پراپرتی های CSS در جاوا اسکریپت

بسیاری از ویژگی‌های CSS، مانند font-size, background-image, text-decorationو …حاوی خط تیره (-) در نام خود هستند.از آنجایی که در جاوا اسکریپت خط فاصله یک عملگر رزرو شده است و به عنوان علامت منفی تعبیر می شود، پس امکان نوشتن عبارتی مانند elem.style.font-size وجود ندارد.

بنابراین، در جاوا اسکریپت، نام ویژگی های CSS که حاوی یک یا چند خط فاصله هستند، به یک کلمه با حروف بزرگ تبدیل می شوند.این کار با حذف خط تیره و بزرگ کردن حرف بلافاصله بعد از هر خط تیره انجام می شود، بنابراین به عنوان مثال ویژگی CSS font-size به پراپرتی fontSize و border-left-style به borderLeftStyle تبدیل می شود.

نحوه دریافت اطلاعات استایل از المنت ها

استایل های اعمال شده بر روی عناصر HTML را میتوانید با استفاده از ویژگی style دریافت کنید.

مثال زیر اطلاعات استایل از عنصری دارای“id="intro را دریافت می کند.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Get Style Information from an Element</title>
</head>
<body>
    <p id="intro" style="color:red; font-size:20px;">This is a paragraph.</p>
    <p>This is another paragraph.</p>
        
    <script>
    // Selecting element
    var elem = document.getElementById("intro");
     
    // Getting style information from element
    document.write(elem.style.color + "<br>");  // Prints: red
    document.write(elem.style.fontSize + "<br>");  // Prints: 20px
    document.write(elem.style.fontStyle);  // Prints nothing
    </script>
</body>
</html>

ویژگی style هنگام دریافت اطلاعات استایل از عناصر چندان مفید نیست، زیرا فقط استایل های ست شده در پراپرتی style عنصر را برمی گرداند نه آنهایی را که از جاهای دیگر آمده است، مانند embedded style sheets یا external style sheets.

برای بدست آوردن مقادیر تمام خصوصیات CSS که در واقع برای رندر یک عنصر استفاده می شوند، می توانید از متد()window.getComputedStyle استفاده کنید، همانطور که در مثال زیر نشان داده شده است:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Get Computed Style Information from an Element</title>
<style type="text/css">
    #intro {        
        font-weight: bold;
        font-style: italic;
    }
</style>
</head>
<body>
    <p id="intro" style="color:red; font-size:20px;">This is a paragraph.</p>
    <p>This is another paragraph.</p>
        
    <script>
    // Selecting element
    var elem = document.getElementById("intro");
     
    // Getting computed style information
    var styles = window.getComputedStyle(elem);
     
    document.write(styles.getPropertyValue("color") + "<br>");  // Prints: rgb(255, 0, 0)    
    document.write(styles.getPropertyValue("font-size") + "<br>");  // Prints: 20px
    document.write(styles.getPropertyValue("font-weight") + "<br>");  // Prints: 700
    document.write(styles.getPropertyValue("font-style"));  // Prints: italic
    </script>
</body>
</html>

نکته: مقدار 700 برای ویژگی CSS font-weight با کلمه کلیدی bold یکسان است. کلمه کلیدی رنگ قرمز همان rgb (255,0,0) است .

نحوه اضافه کردن کلاس های CSS به المنت ها

می‌توانید با استفاده از ویژگی className، کلاس‌های CSS را برای عناصر HTML دریافت یا تنظیم کنید.

از آنجایی که class یک کلمه رزرو شده در جاوا اسکریپت است، بنابراین جاوا اسکریپت از ویژگی classNameبرای ارجاع مقدار اتریبیوت کلاس HTML استفاده می کند. مثال زیر نحوه اضافه کردن یک کلاس جدید یا جایگزینی تمام کلاس های موجود را به عنصر <div> با “id="info نشان می دهد.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Add or Replace CSS Classes on an Element</title>
<style>
    .highlight {
        background: yellow;
    }
    .disabled{
        background: lightgray;
        opacity: 0.7;
    }
</style>
</head>
<body>
    <div id="info" class="disabled">Something very important!</div>
        
    <script>
    // Selecting element
    var elem = document.getElementById("info");
    
    elem.className = "note";  // Add or replace all classes with note class
    elem.className += " highlight";  // Add a new class highlight
    </script>
</body>
</html>

حتی راه بهتری برای کار با کلاس های CSS وجود دارد. می توانید از ویژگی classList برای دریافت، تنظیم یا حذف کلاس های CSS به راحتی از یک عنصر استفاده کنید. این ویژگی در همه مرورگرهای اصلی به جز اینترنت اکسپلورر قبل از نسخه 10 پشتیبانی می شود. به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Add or Remove CSS Classes on an Element Using classList</title>
<style>
    .highlight {
        background: yellow;
    }
    .disabled{
        background: lightgray;
        opacity: 0.7;
    }
    .hide{
        display: none;
    }
</style>
</head>
<body>
    <div id="info" class="disabled">Something very important!</div>
    
    <script>
    // Selecting element
    var elem = document.getElementById("info");
     
    elem.classList.add("hide");  // Add a new class
    elem.classList.add("note", "highlight");  // Add multiple classes
    elem.classList.remove("hide"); // Remove a class
    elem.classList.remove("disabled", "note"); // Remove multiple classes
    elem.classList.toggle("visible"); // If class exists remove it, if not add it
     
    // Determine if class exist
    if(elem.classList.contains("highlight")) {
        alert("The specified class exists on the element.");
    }
    </script>
</body>
</html>

خب دوستان گرامی به پایان بخش DOM Styling در جاوا اسکریپت رسیدیم امیدواریم مورد توجه شما قرار گیرد.