Синфҳо, услубҳо ва атрибутҳо
Намуди зоҳириро тавассути синфҳо иваз мекунанд
Барои он ки элемент сурх, калон ё пинҳон шавад, аз ҳама қулай — услубҳоро дар JavaScript нанавиштан, балки
онҳоро пешакӣ дар CSS зери синф тавсиф кардан ва аз код танҳо он синфро фаъол ё ғайрифаъол кардан аст. Ҳамин тавр услубҳо
дар CSS мемонанд, JS бошад танҳо барои мантиқ ҷавоб медиҳад: «ҳозир хато аст — синфи error-ро илова кун».
classList
Ҳар элемент classList дорад — маҷмӯи синфҳои он бо методҳои қулай:
const btn = document.querySelector("#buy");
btn.classList.add("active"); // илова кардан
btn.classList.remove("disabled"); // хориҷ кардан
btn.classList.toggle("open"); // нест — илова, ҳаст — хориҷ
btn.classList.contains("active"); // true / false — синф ҳаст ё не
btn.classList.add("big", "primary"); // якчандторо якбора
toggle true бармегардонад, агар пас аз даъват синф бошад, ва false, агар хориҷ шуда бошад. toggle
аргументи дуюм дорад — шарт: el.classList.toggle("error", age < 18) синфро вақте ки шарт
дуруст аст илова мекунад ва вақте ки нодуруст аст хориҷ мекунад. Ин аз if/else бо add ва remove озод мекунад.
Хосияти className ҳам ҳаст — ҳамаи синфҳо дар як сатр. Ба он навишта, шумо ҳамаи синфҳоро якбора иваз мекунед,
бинобар ин барои як синф classList беҳтар аст.
Услубҳо бевосита: style
Баъзан қимат пешакӣ маълум нест — паҳнои навори пешрафт, координатаҳо, ранг аз танзимот. Он гоҳ
бевосита аз код ба style менависанд:
const bar = document.querySelector("#progress");
bar.style.width = "40%";
bar.style.backgroundColor = "tomato"; // background-color → backgroundColor
bar.style.marginTop = "8px";
bar.style.width = ""; // услуби худро хориҷ кардан, ба CSS баргаштан
Қоида ду аст:
- Хосиятҳои CSS бо дефис бо camelCase навишта мешаванд:
font-size→fontSize,z-index→zIndex. - Қимат — сатр бо воҳидҳо:
"40%","120px". Адади40бе воҳид бароиwidthкор намекунад.
el.style танҳо услубҳоеро нишон медиҳад, ки ба атрибути style навишта шудаанд (аз JS ё дар HTML). Услуби ниҳоиро
бо назардошти файлҳои CSS тавассути getComputedStyle(el).width фаҳмидан мумкин аст.
Пинҳон кардан ва нишон додан
Се усули маъмул:
el.hidden = true; // атрибути hidden — элемент пинҳон аст
el.hidden = false;
el.style.display = "none"; // бо услуб пинҳон кардан
el.style.display = ""; // ба ҳолати CSS баргардондан
el.classList.add("hidden"); // синфе, ки дар CSS display: none дорад
Усул бо синф аз ҳама чандир аст: дар CSS нопадидшавии ҳамворро сохтан мумкин, дар JS бошад як сатр мемонад.
Атрибутҳо
Ҳар атрибути HTML-ро хондан ва иваз кардан мумкин аст:
const link = document.querySelector("a");
console.log(link.getAttribute("href")); // "/catalog"
link.setAttribute("href", "/sale");
link.setAttribute("target", "_blank");
link.removeAttribute("target");
console.log(link.hasAttribute("target")); // false
Барои атрибутҳои маъмул хосиятҳои тайёр ҳастанд: img.src, a.href, input.disabled, input.checked,
el.id. Атрибутҳои мантиқиро (disabled, checked, hidden) бо хосият иваз кардан қулайтар аст:
btn.disabled = true.
Маълумоти худ: атрибутҳои data
Барои нигоҳ доштани маълумоти худ дар HTML (id-и мол, нарх, категория) атрибутҳоеро истифода мебаранд, ки бо
data- сар мешаванд. Дар JavaScript онҳо тавассути dataset дастрасанд:
<li class="product" data-id="42" data-price="1990" data-in-stock="yes">Гӯшмонак</li>
const item = document.querySelector(".product");
console.log(item.dataset.id); // "42"
console.log(item.dataset.price); // "1990" — сатр!
console.log(item.dataset.inStock); // "yes" — data-in-stock → inStock
item.dataset.price = "1490"; // атрибут дар HTML ҳам иваз мешавад
Дефисҳо дар ном ба camelCase табдил меёбанд, қиматҳо бошанд — ҳамеша сатр (Number(...) барои ададҳо).
Хулоса
- Намуди зоҳирӣ — тавассути синфҳо:
classList.add / remove / toggle / contains. toggle(синф, шарт)— синфро танҳо вақте ки шарт дуруст аст фаъол кардан.style.хосият = "қимат бо воҳидҳо"— барои қиматҳое, ки дар код ҳисоб мешаванд.- Атрибутҳо:
getAttribute,setAttribute,removeAttribute; маълумоти худ —data-*ваdataset.