"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Como extrair propriedades CSS dinamicamente usando JavaScript?

Como extrair propriedades CSS dinamicamente usando JavaScript?

Publicado em 2024-11-08
Navegar:339

How to Extract CSS Properties Dynamically Using JavaScript?

Extração de propriedades CSS usando JavaScript

Navegar pelas folhas de estilo anexadas a um documento HTML pode fornecer informações valiosas sobre a apresentação dos elementos da página. Em particular, a capacidade de ler propriedades CSS específicas pode ajudar na manipulação dinâmica de estilo.

Uma abordagem envolve inspecionar manualmente o objeto document.styleSheets e analisar as regras de estilo. No entanto, esse método é trabalhoso e pode se tornar complicado, especialmente quando direcionado a seletores específicos.

Uma técnica mais direta é criar um elemento temporário que corresponda ao seletor desejado. Usando os métodos getComputedStyle() (para navegadores modernos) ou currentStyle (para Internet Explorer), você pode recuperar o valor computado de qualquer propriedade CSS para o elemento criado.

Por exemplo, considere o código a seguir para recuperar o propriedade color de um

com a classe "layout":
function getStyleProp(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
  } else if (elem.currentStyle) {
    return elem.currentStyle[prop]; // IE
  }
}
window.onload = function () {
  var d = document.createElement("div"); // Create div
  d.className = "layout"; // Set class = "layout"
  alert(getStyleProp(d, "color")); // Get property value
};

Alternativamente, se você quiser determinar a propriedade CSS herdada de uma folha de estilo sem considerar quaisquer estilos embutidos, a seguinte função pode ser usada:

function getNonInlineStyle(elem, prop) {
  var style = elem.cssText; // Cache the inline style
  elem.cssText = ""; // Remove all inline styles
  var inheritedPropValue = getStyleProp(elem, prop); // Get inherited value
  elem.cssText = style; // Add the inline style back
  return inheritedPropValue;
}

Ao aproveitar essas técnicas, os desenvolvedores podem ajustar dinamicamente as propriedades CSS dos elementos, manipular sua apresentação e obter uma compreensão mais profunda do estilo da página.

Declaração de lançamento Este artigo foi reimpresso em: 1729673789 Se houver alguma violação, entre em contato com [email protected] para excluí-lo
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3