Чӣ гуна метавон ҳама унсурҳои пинҳоншудаи саҳифаро…

Моҷул селекторҳои CSS дар ҳамоҳангӣ бо JavaScript истифода бурда мешаванд.

Равишҳои асосӣ:

** :not(:visible) псевдокласс (нестандартӣ)**: Гарчанде ки CSS стандартӣ селектори мустақим барои "навидим" надорад, баъзе фреймворкҳо ва китобхонаҳо (масалан, jQuery) иҷрои худро пешниҳод мекунанд ё логикаи корбариро метавон эҷод кард. Ин равиш бештар барои фаҳмондан аст.
Таҳқиқи display, visibility ва opacity: Ин роҳи боэътимодтарин дар JavaScript нативӣ мебошад. Элементҳои пинҳоншуда онҳое мебошанд, ки бо display: none, visibility: hidden ё opacity: 0 (агар онҳо падари барои фарзандони намоён набошанд) муайян карда мешаванд.

// Ҳама элементҳоро дар саҳифа мегирем
const allElements = document.querySelectorAll('*');

const hiddenElements = [];

allElements.forEach(element => {
  const computedStyle = getComputedStyle(element);

  // Санҷиши display: none
  if (computedStyle.display === 'none') {
    hiddenElements.push(element);
    return; // Элемент пинҳон аст, маънои санҷиши visibility ва opacity намерасад
  }

  // Санҷиши visibility: hidden
  if (computedStyle.visibility === 'hidden') {
    hiddenElements.push(element);
    return;
  }

  // Санҷиши opacity: 0
  if (computedStyle.opacity === '0' && !(element.children.length > 0 && Array.from(element.children).some(child => getComputedStyle(child).opacity !== '0')) ) {
    // Шартҳои мураккаб барои opacity: мо санҷиш мекунем, ки худи элемент аз сабаби opacity: 0 нопадид аст
    // ва ки у фарзандони намоён надорад (бо opacity > 0)
    hiddenElements.push(element);
    return;
  }

  // Санҷиши иловагӣ барои пинҳон шудан аз ҷониби падар (сценарийи мураккаб)
  let parent = element.parentElement;
  while (parent) {
    const parentComputedStyle = getComputedStyle(parent);
    if (parentComputedStyle.display === 'none' || parentComputedStyle.visibility === 'hidden' || parentComputedStyle.opacity === '0') {
      hiddenElements.push(element);
      break; // Элемент аз падар пинҳон аст
    }
    parent = parent.parentElement;
  }
});

console.log('Элементҳои пинҳоншуда:', hiddenElements);

jQuery: jQuery ин корро бо псевдокласси :hidden осон мекунад.

// Барои ёфтан ё элементҳои пинҳоншуда jQuery истифода мекунем
const hiddenElementsJquery = $(':hidden');

console.log('Элементҳои пинҳоншуда (jQuery):', hiddenElementsJquery);

Муҳим: Дар истифодаи JavaScript нативӣ, санҷиши opacity: 0 эҳтиёҷ дорад, ки бодиққат анҷом дода шавад, то падарони пинҳоншуда бо фарзандони opacity: 0 дар рӯйхат дохил нашаванд, агар онҳо танҳо як фарзанди онҳо чунин бошад, вале худи падар ва дигар фарзандони он намоён бошанд. Ҳамчунин, бояд ба назар гирифт, ки элемент метавонад бо сабаби андоза (дарозӣ/баландӣ 0) ё ҷойгиршавӣ дар берун аз вьюпорт пинҳон бошад, аммо ин мустақиман ба хусусияти CSS "пинҳон" мансуб нест.

Чӣ гуна метавон ҳама унсурҳои пинҳоншудаи саҳифаро ёфт?