تفاوت بین 4 انتخابگر مهم و اصلی در Css و JavaScript

در این پست به تفاوت نحوه ی صدا زدن Element , Id , Class و Attribute در سی اس اس و جاوا اسکریپت میپردازیم .

زمانی که ما میخواهیم در زبان Css و یا جاوا اسکریپت , یک عنصر خاصی را صدا زده و به آن خاصیت هایی بدهیم , باید از روش های مختلفی ( در جاوا اسکریپت ) استفاده کنیم که در زیر بهترین روش آن برای شما طراحان وب سایت عزیز آورده شده است …

در زیر ۴ روش معمول در دو زبان بررسی و مقایسه شده است …

1 – اگر بخواهیم یک ID را صدا زده و خاصیتی را به آن بدهیم :

در Css :

#id {
  background-color:red;
}

در JavaScript :

var vms = document.getElementById('id');
vms.style.background-color = 'red';

2 – اگر بخواهیم یک Class را صدا زده و خاصیتی را به آن بدهیم :

در Css :

.class {
  background-color:red;
}

در JavaScript :

var vms = document.getElementsByClassName('class');
for (i=0; i<el.length; i++) {
  vms[i].style.background-color = 'red';
}

3 – اگر بخواهیم یک Element ( تگ ) کلی را صدا زده و خاصیتی را به آن بدهیم :

در Css :

element{
  background-color:red;
}

در JavaScript :

var vms = document.getElementsByTagName('element');

for (i=0; i<el.length; i++) {
  vms[i].style.background = 'red';
}

4 – اگر بخواهیم یک Attribute کلی را صدا زده و خاصیتی را به آن بدهیم :

در Css :

[attribute]{
  background-color:red;
}

در JavaScript :

var vms = document.querySelectorAll('[attribute]');

for (i=0; i<el.length; i++) {
  vms[i].style.background-color = 'red';
}

توجه :‌ به جای id , class , element و attribute در کد های بالا باید مقادیر دلخواه خود را قرار دهید . مثلا test# و box. و h1 و [href]

پخش اختصاصی

آموزش : وحید مجیدی