خانه آموزش زبان جاوااسکریپت آموزش DOM در جاوااسکریپت ویژگی value در DOM جاوااسکریپت

ویژگی value در DOM جاوااسکریپت

توسط

۱۳۹۹-۱۰-۲۷

این آموزش در تاریخ ۱۳۹۹/۱۲/۰۱ آپدیت شده است.

آموزش ویژگی value در DOM جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی value در DOM جاوااسکریپت با من همراه باشید.

ویژگی value در DOM جاوااسکریپت

Free-Learn

آنچه در این جلسه میخوانید :

1 ویژگی value در DOM جاوااسکریپت
2 مثال از این ویژگی
3 پشتیبانی مرورگرها
4 شکل نوشتاری
5 نکات و توضیحات
6 مثال های بیشتر

ویژگی value در DOM جاوااسکریپت

با استفاده از ویژگی value ما میتونیم هم مقدار یک صفت رو از یک تگ بگیریم و هم میتونیم یک مقدار جدید به همون صفت بدهیم.

با استفاد از ویژگی name نیز میتونیم نام یک صفت رو بدست آوریم.

مقدار برگشتی	برگشت مقدار صفت از یک نام گره مشخص شده
نسخه DOM	Core Level 1

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.

مثال شماره ۱ : بدست آوردن مقدار صفت class از تگ و نمایش در خروجی.

<script>

function MyFunction(){
 var a , myh2 , result;
 myh2 = document.getElementById("MyH2");
 result = document.getElementById("Result");
 a = myh2.attributes.getNamedItem("class").value;
 result.innerHTML = a;
}

</script>

function MyFunction(){

var a , myh2 , result;

myh2 = document.getElementById("MyH2");

result = document.getElementById("Result");

a = myh2.attributes.getNamedItem("class").value;

result.innerHTML = a;

}

</script>

امتحان کنید

مثال شماره ۲ : ست کردن مقدار جدید به صفت class

<script>

function MyFunction(){
 a = myh2.attributes.getNamedItem("class").value = "new-class";
}

</script>

function MyFunction(){

a = myh2.attributes.getNamedItem("class").value = "new-class";

}

</script>

امتحان کنید

توضیح مثال بالا :

خب در مثال بالا تگ H2 بصورت پیش فرض یه کلاس بنام test براش تعریف کردیم و حالا استایل دلخواه بهش دادیم، حال در ادامه یه کلاس دیگه بنام new-class تعریف کردیم و باز استایل دلخواه بهش دادیم.

بعدش اومدیم صفت کلاس رو از تگ H2 گرفتیم و مقدار جدید ( همون کلاس new-class ) رو بهش دادیم، حالا اگه بروی دکمه کلیک شه کلاس new-class نیز به تگ H2 اضافه خواهد شد.

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.

نام ویژگی	Chrome	Firefox	Opera	Safari	IE
value	بله	بله	بله	بله	بله

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.

برای گرفتن مقدار صفت

attribute.Value

1	attribute.Value

برای ست / تنظیم کردن مقدار صفت

 attribute.Value = " New_Value "

1	attribute.Value = " New_Value "

Free-Learn

نکات و توضیحات

برای اضافه کردین چندین کلاس بصورت همزمان کافیه بین نام کلاس ها ۱ عدد فاصله قرار دهید. مثال :

a = myh2.attributes.getNamedItem("class").value = "class1 class2 class3";

1	a = myh2.attributes.getNamedItem("class").value = "class1 class2 class3";

Free-Learn

مثال های بیشتر

مثال شماره ۱ : اضافه کردن حالت شب به صفحه ( با کلیک بروی دکمه حالت شب فعال میشه )

<script>

function MyFunction(){
 var a , mybody;
 mybody = document.getElementById("MyBody");
 a = mybody.attributes.getNamedItem("class").value = "dark-mode";
}

</script>

function MyFunction(){

var a , mybody;

mybody = document.getElementById("MyBody");

a = mybody.attributes.getNamedItem("class").value = "dark-mode";

}

</script>

امتحان کنید

توضیح مثال بالا :

خب همونطور که در مثال شماره ۲ ( کمی بالاتر ) مشاهده کردید ما به راحتی میتونیم مقدار جدید به صفت مورد نظرمون بدیم ، حال اومدیم با استفاده از این روش حالت شب یا Night Mode یا Dark Mode رو پیاده سازی کردیم.

یعنی باید وقتی بروی دکمه کلیک میشه، کلاس dark-mode به تگ body اضافه شه و وقتی این کلاس به تگ Body اضافه شه یعنی حالت شب فعال شده.

فقط دیگه حواستون باشه برای اینکه بتونید استایل در حالت شب بدید باید اول یه body.dark-mode بنویسید بعدش دیگه اون کلاس یا id یا تگ یا هرچیزی که خواستید حالت شب بگیره رو وارد کنید. مثال :

body.dark-mode .test{
 دستورات سی اس اس
}

body.dark-mode #test{
 دستورات سی اس اس
}

body.dark-mode .test{

دستورات سی اس اس

}

body.dark-mode #test{

دستورات سی اس اس

}

Free-Learn

دریافت PDF یا پرینت این مطلب