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

ویژگی (attributes) کلمات خاصی هستند که در داخل تگ شروع یک عنصر HTML برای کنترل رفتار تگ ها یا ارائه اطلاعات اضافی در مورد تگ استفاده می شوند.

جاوا اسکریپت چندین روش برای افزودن، حذف یا تغییر ویژگی یک عنصر HTML ارائه می دهد. در بخش های بعدی به طور مفصل با این روش ها آشنا خواهیم شد.

Getting Element’s Attribute Value

متد ()getAttribute برای بدست آوردن مقدار فعلی یک ویژگی روی عنصر استفاده می شود.اگر ویژگی مشخص شده روی عنصر وجود نداشته باشد.آنگاه null را برمی‌گرداند. ب عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Get the Value of an Attribute</title>
</head>
<body>
    <p><a href="https://www.google.com/" target="_blank" id="myLink">Google</a></p>

    <script>
        // Selecting the element by ID attribute
        var link = document.getElementById("myLink");
        
        // Getting the attributes values
        var href = link.getAttribute("href");
        document.write(href); // Prints: https://www.google.com/
        document.write("<br>");
        
        var target = link.getAttribute("target");
        document.write(target); // Prints: _blank
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Get the Value of an Attribute</title>

</head>

<body>

<p><a href="https://www.google.com/" target="_blank" id="myLink">Google</a></p>

// Selecting the element by ID attribute

var link = document.getElementById("myLink");

// Getting the attributes values

var href = link.getAttribute("href");

document.write(href); // Prints: https://www.google.com/

document.write("<br>");

var target = link.getAttribute("target");

document.write(target); // Prints: _blank

</script>

</body>

</html>

جاوا اسکریپت چندین راه مختلف برای انتخاب عناصر در یک صفحه را ارائه می دهد. برای اطلاع بیشتر از این روش ها می توانید جلسه سلکتور ها در جاوا اسکریپت را مطالعه فرمایید.

Setting Attributes on Elements

متد ()setAttribute برای مقداردهی یک ویژگی در عنصر مشخص شده استفاده می شود.

اگر ویژگی از قبل روی عنصر وجود داشته باشد، مقدار آن آپدیت می شود. در غیر این صورت یک اتریبیوت جدید با نام و مقدار مشخص به آن اضافه می شود. مثال زیر یک classو یک ویژگی disabled را به عنصر <button> اضافه می کند.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Set an Attribute on an Element</title>
</head>
<body>
    <button type="button" id="myBtn">Click Me</button>

    <script>
        // Selecting the element
        var btn = document.getElementById("myBtn");
        
        // Setting new attributes
        btn.setAttribute("class", "click-btn");
        btn.setAttribute("disabled", "");
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Set an Attribute on an Element</title>

</head>

<body>

<button type="button" id="myBtn">Click Me</button>

// Selecting the element

var btn = document.getElementById("myBtn");

// Setting new attributes

btn.setAttribute("class", "click-btn");

btn.setAttribute("disabled", "");

</script>

</body>

</html>

همچنین می توانید از متد setAttribute برای بروز رسانی یا تغییر مقدار ویژگی موجود در یک عنصر HTML استفاده کنید. مثال زیر مقدار ویژگی href موجود یک تگ (<a>) را اپدیت می کند.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Change the Value of an Attribute</title>
</head>
<body>
    <p><a href="#" id="myLink">Tutorial Republic</a></p>

    <script>
        // Selecting the element
        var link = document.getElementById("myLink");
        
        // Changing the href attribute value
        link.setAttribute("href", "<a href="https://www.code-it.ir">https://www.code-it.ir</a>");
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Change the Value of an Attribute</title>

</head>

<body>

<p><a href="#" id="myLink">Tutorial Republic</a></p>

// Selecting the element

var link = document.getElementById("myLink");

// Changing the href attribute value

link.setAttribute("href", "<a href="https://www.code-it.ir">https://www.code-it.ir</a>");

</script>

</body>

</html>

Removing Attributes from Elements

متد ()removeAttribute برای حذف یک ویژگی از المنت مشخص شده استفاده می شود.

مثال زیر ویژگی href را از تگ <a> حذف می کند.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Remove an Attribute from an Element</title>
</head>
<body>
    <a href="<a href="https://www.google.com/">https://www.google.com/</a>" id="myLink">Google</a>

    <script>
        // Selecting the element
        var link = document.getElementById("myLink");
        
        // Removing the href attribute
        link.removeAttribute("href");
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Remove an Attribute from an Element</title>

</head>

<body>

<a href="<a href="https://www.google.com/">https://www.google.com/</a>" id="myLink">Google</a>

// Selecting the element

var link = document.getElementById("myLink");

// Removing the href attribute

link.removeAttribute("href");

</script>

</body>

</html>

خب دوستان گرامی، به پایان جلسه ویژگی های set و get در جاوا اسکریپت رسیدیم امیداواریم برای شما مفید واقع گردد.

سایر مقالات

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

نودها در جاوا اسکریپت

برای امتیاز به این نوشته کلیک کنید!

[کل: 1 میانگین: 1]

اشتراک‌گذاری

سلکتورها در جاوا اسکریپت | JavaScript DOM Selectors نوشته قبل

اتصال گوشی به اندروید استودیو به صورت بی سیم با افزونه Android wifi نوشته بعد

علی فرجی

علی فرجی هستم، برنامه نویس جاوا اسکریپت و ریکت با بیش از 5 سال تجربه. من عاشق برنامه نویسیم و همیشه به دنبال یادگیری چیزهای جدید هستم.همچنین یکی از بنیانگذار های سایت کدایت ، یک سایت آموزش برنامه نویسی در حوزه جاوا اسکریپت، ریکت، اندروید و ... هستم. امیدوارم بتوانم با دانش و تجربه خود به سایر برنامه نویسان کمک کنم تا در این زمینه پیشرفت کنند.