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

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

توسط

۱۴۰۰-۰۴-۰۴

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

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

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

Free-Learn

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

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

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

با استفاده از ویژگی style هم میتونیم ویژگی ( یا Property ) زبان CSS یک عنصر رو بدست آوریم و هم میتونیم ویژگی جدید CSS براش تعریف نماییم.

همونطور که میدونید ما یک زبان داریم به اسم CSS ( یا سی اس اس ) یا زبان استایل نویسی هم بهش میگیم، خب ما در این زبان تعدادی ویژگی داریم که بهشون میگن Property ، که این ویژگی ها خب هرکدوم میبینی کاری برامون انجام میدن. ( لیست کامل ویژگی های زبان CSS )

مثلا با استفاده از ویژگی font-size میتونیم اندازه فونت رو مشخص کنیم یا مثلا با استفاده از ویژگی text-align میتونیم تراز متن رو مشخص نماییم و کلی ویژگی دیگه که هرکدوم کاری انجام میدن.

حال ما در زبان جاوااسکریپت هم این قدرت رو داریم که بتونیم برای یک عنصر استایل تعریف کنیم، ( یعنی خوده ویژگی ها همونایی هستن که درون CSS هستن ) ما فقط میتونیم از اونا در جاوااسکریپت هم استفاده نماییم.

مقدار برگشتی	برگشت مقدار یک ویژگی مشخص شده
نسخه DOM	Dom Level 2 CSS

Free-Learn

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

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

مثال شماره ۱ : گرفتن مقدار ویژگی color از عنصر

<script>

function get_style(){
 var myp , result;
 myp = document.getElementById("MyP");
 result = document.getElementById("Result");
 result.innerHTML = myp.style.color;
}

</script>

function get_style(){

var myp , result;

myp = document.getElementById("MyP");

result = document.getElementById("Result");

result.innerHTML = myp.style.color;

}

</script>

امتحان کنید

مثال شماره ۲ : تنظیم مقدار جدید برای ویژگی color

<script>

function get_style(){
 var myp , result;
 myp = document.getElementById("MyP");
 result = document.getElementById("Result");
 result.innerHTML = myp.style.color = "red";
}

</script>

function get_style(){

var myp , result;

myp = document.getElementById("MyP");

result = document.getElementById("Result");

result.innerHTML = myp.style.color = "red";

}

</script>

امتحان کنید

مثال شماره ۳ : میخوایم با استفاده از جاوااسکریپت یک تگ style در صفحه ایجاد کنیم و به تگ head هم اضافش کنیم و در نهایت داخل تگ style استایل برای صفحه تعریف کنیم.

<script>

function set_style(){
 var my_style_tag , my_style_css;
 
 // style تعریف تگ
 my_style_tag = document.createElement("STYLE");
 
 // css تعریف دستورات
 my_style_css = document.createTextNode(
  "body{background-color:#123456;text-align:center;}h2{background-color:#FFF4A3;}"
 );
 
 // style درج کردن دستورات سی اس اس به داخل تگ
 my_style_tag.appendChild(my_style_css);
 
 // head به داخل تگ style درج کردن تگ 
 document.head.appendChild(my_style_tag);
}

</script>

function set_style(){

var my_style_tag , my_style_css;

// style تعریف تگ

my_style_tag = document.createElement("STYLE");

// css تعریف دستورات

my_style_css = document.createTextNode(

"body{background-color:#123456;text-align:center;}h2{background-color:#FFF4A3;}"

);

// style درج کردن دستورات سی اس اس به داخل تگ

my_style_tag.appendChild(my_style_css);

// head به داخل تگ style درج کردن تگ

document.head.appendChild(my_style_tag);

}

</script>

امتحان کنید

مثال شماره ۴ : بدست آوردن دستورات CSS موجود در تگ Style صفحه

<script>

function get_style(){
 var mytag , result;
 mytag = document.getElementById("MyStyle");
 result = document.getElementById("Result");
 result.innerHTML = mytag.innerHTML;
}

</script>

function get_style(){

var mytag , result;

mytag = document.getElementById("MyStyle");

result = document.getElementById("Result");

result.innerHTML = mytag.innerHTML;

}

</script>

امتحان کنید

مثال شماره ۵ : استایل دادن به تگ body ( یعنی به کل صفحه )

<script>

function set_style(){
 document.body.style.backgroundColor = "#123456";
 document.body.style.color = "white";
 document.body.style.textAlign = "center";
 document.body.style.fontSize = "13px"; 
}

</script>

function set_style(){

document.body.style.backgroundColor = "#123456";

document.body.style.color = "white";

document.body.style.textAlign = "center";

document.body.style.fontSize = "13px";

}

</script>

امتحان کنید

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

یادتون باشه همیشه اون ویژگی هایی که ۲ کلمه ای هستند ( مثه text-align یا background-color و… ) اینا باید هیچ فاصله ای بینشون نباشه و همیشه حرف اول از کلمه دوم باید با حروف بزرگ نوشته شه. مثال :

 style.backgroundColor = "#123456";
 style.textAlign = "center";
 style.fontSize = "13px";
 style.backgroundImage = "url('image.jpg')";

style.backgroundColor = "#123456";

style.textAlign = "center";

style.fontSize = "13px";

style.backgroundImage = "url('image.jpg')";

Free-Learn

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

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

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

Free-Learn

شکل نوشتاری

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

برای گرفتن مقدار ویژگی :

Element.style.Property_Name;

1	Element.style.Property_Name;

Property_Name : نام ویژگی سی اس اس
تنظیم / ست کردن مقدار جدید :

Element.style.Property_Name = " Property_Value ";

1	Element.style.Property_Name = " Property_Value ";

Property_Name : نام ویژگی سی اس اس
Property_Value : مقدار ویژگی سی اس اس

Free-Learn

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

ویژگی هایی که ۲ کلمه ای هستند ( مثه text-align و.. ) باید هیچ فاصله ای بین کلمات نباشه و همیشه حرف اول از کلمه دوم باید با حروف بزرگ نوشته شه. ( مثه style.textAlign )
لیست کامل ویژگی های زبان CSS را از اینجا مشاهده نمایید.

Free-Learn

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