0
160
VistasCómo obtener los valores heredados del elemento de JavaScript
Bien, entonces tengo un script que obtiene el valor de la propiedad CSS de un elemento en el que se hizo clic. Para esto, evité window.getComputedStyle() porque básicamente convierte valores rem a px y así sucesivamente... En su lugar, usé CSSStyleSheet.cssRules solo para mantener la originalidad de las unidades reales dadas y no convertirlas.
¡Y esto funciona bien! pero no logra capturar las reglas CSSR que se heredan del elemento principal, ya que los estilos no se aplican directamente al elemento.
Por ejemplo:
<style> #new { font-size: 2rem; } </style> <div id="new"> <h1 class="h1">This is a heading</h1> <!––Here h1 is inheriting font-size from div that can't be catched by CSSRules––> </div> Para este caso, getComputedStyle() funciona mejor, ya que CSSRules no pudo capturar las propiedades heredadas, pero nuevamente, surge el problema de las unidades, por lo que no puedo usar eso.
¿O tal vez algo para obtener la unidad métrica de un elemento? 🤷♀️ ¡Eso también funcionaría!
Aunque Chrome parece haber descubierto esto perfectamente:
Es 2022 y también he verificado otras respuestas , pero parece que nadie ha descubierto esto todavía. ¿Cuál es la solución actual a esto? ¿O el mejor truco?
Edit1:
- Quiero la misma cadena definida en el CSS por el usuario. Me gusta: calc (2rem + 1vh) Y con CSSRules funciona, pero no funciona con la herencia porque ¡ni siquiera captura la propiedad! ComputedStyle hace eso, pero en
pxestoy un poco atascado aquí.
Edit2:
Elegí la respuesta de Lajos Arpads como la aceptada debido a la ayuda que recibí en los comentarios (no la respuesta real en sí). La solución requerirá mucha mano de obra, así que es algo que tengo que hacer.
1 Respuestas
Responde la pregunta0
Simplemente puede implementar un convertidor de píxeles a rem y usarlo:
function convertPixelsToRem(pixels) { return ((pixels.replace("px", "") / getComputedStyle(document.documentElement).fontSize.replace("px", "")) + "rem"); } console.log(convertPixelsToRem(window.getDefaultComputedStyle(document.getElementById("new").querySelector(".h1"))["font-size"])); <style> #new { font-size: 2rem; } </style> <div id="new"> <h1 class="h1">This is a heading</h1> <!–– Here h1 is inheriting font-size from div ––> </div>EDITAR
Podrías hacer algo como esto:
getOriginalRule(ruleName, ruleValue, item) { while (hasSameRule(item.parentNode, ruleName, ruleValue)) item = item.parentNode; //return the rule value based on the item via CSSStyleSheet.cssRules }EDIT2
De acuerdo con las ideas discutidas en la sección de comentarios, con el objetivo de poder recopilar las reglas sin procesar aplicadas directamente o por herencia a los nodos, existen dos soluciones principales:
- uno puede recorrer las reglas, encontrar los elementos a los que se aplican y luego recorrer el árbol DOM para descender las reglas sin procesar donde no fueron anuladas
- uno puede recorrer el árbol DOM de arriba a abajo y encontrar todos los nodos, comparar las reglas de cada nodo con las reglas de sus padres y, si difieren, descender las reglas de los padres
La principal diferencia entre los dos es que el primero comienza con todas las reglas CSS, mientras que el segundo solo usa los valores.