Odczyt parametru stylu css, na podstawie definicji, nie użycia

Odczyt parametru stylu css, na podstawie definicji, nie użycia
misio_
  • Rejestracja:12 miesięcy
  • Ostatnio:8 dni
  • Postów:61
1

Dzień dobry.

Jak pobrać wartość właściwości (parametru) stylu css, przy pomocy przeglądarkowego JS (jQuery np.)? Przykład:

Kopiuj
<style>
  .class123 {
    --param: 1.23;
  }

  .class234 {
    --param: 1.44;
  }
</style>

Jak odczytać wartość --param dla wybranej klasy?

Dzięki.
M.

edytowany 1x, ostatnio: misio_
RJ
  • Rejestracja:prawie 3 lata
  • Ostatnio:około 10 godzin
  • Postów:436
3

Dżepetto po pytaniu odpowiada:

Kopiuj
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get CSS Variable using JS</title>
    <style>
        :root {
            --main-color: #3498db;
        }

        body {
            background-color: var(--main-color);
        }
    </style>
</head>
<body>
    <script>
        // Select the root element (the document itself)
        const root = document.documentElement;

        // Get the value of the CSS variable --main-color
        const mainColor = getComputedStyle(root).getPropertyValue('--main-color');

        // Log the value to the console
        console.log(mainColor); // Output: #3498db
    </script>
</body>
</html>


Przepraszam, że snippet z GPT, ale chciałem tylko pokazać, jak wiele tematów jest zakładanych niepotrzebnie...

edytowany 2x, ostatnio: cerrato
misio_
  • Rejestracja:12 miesięcy
  • Ostatnio:8 dni
  • Postów:61
0

Dziękuję za odpowiedź, jednak nie rozwiązuje ona mojego problemu. Zauważ, że mam dwie klasy, i każda ma wspólną właściwość --ratio. Jak odczytać ratio dla danej, wybranej klasy (dla każdej ma on inną wartość)?

RJ
  • Rejestracja:prawie 3 lata
  • Ostatnio:około 10 godzin
  • Postów:436
2

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Masz przeładowanie który przyjmuje element jako parametr.
Zamiast roota możesz podać cokolwiek, co siedzi w DOM, czyli swój element z klasą, która Ci pasuje.

edytowany 2x, ostatnio: rjakubowski
misio_
  • Rejestracja:12 miesięcy
  • Ostatnio:8 dni
  • Postów:61
0

Dziękuję za odpowiedź.

W moim przypadku mam tylko klasę, bez istniejącego elementu tej klasy. Jak odczytać wartość parametru na podstawie samej nazwy klasy?

Kopiuj
var classes = ['classA', 'classB'];
Kopiuj
<style>
  .classA {
    --ratio: 1.5;
  }

  .classB {
    --ratio: 1.75;
  }
</style>

Nie do końca rozumiem, jak zastosować Twój kod:

Kopiuj
const root = document.documentElement;
const ratio = getComputedStyle(root, '.classA').getPropertyValue('--ratio');
console.log(ratio);

To nie działa, nie wiem co robię źle?

PS. Ok rozumiem, kod będzie działał jak będzie istniał element o danej klasie. U mnie nie ma elementu, będę go tworzył na postawie css (chcę odczytać parametr --ratio i na tej podstawie liczyć szerokość i wysokość elementu). Jak odczytać ratio, jeżeli nie istnieje jeszcze element?

OK odpowiedź jest tu: https://stackoverflow.com/questions/33862570/javascript-getcomputedstyle-without-source-element

Kopiuj
 if (class_) {
    var div = document.createElement("div")
    div.style.display = "none"
    document.body.appendChild(div)

    div.className = class_;
    ratio = parseFloat(getComputedStyle(div).getPropertyValue("--ratio"));
    div.parentNode.removeChild(div);
}
edytowany 3x, ostatnio: misio_
RJ
Dwa parametry ratio na root elemencie albo trzymaj to w JS zamiast arrayki zrób sobie dicta i elo.
misio_
@rjakubowski: dzięki, znalazłem brakujące ogniwo, dodaj proszę jeszcze jeden post pod spodem,żebym mógł Cię nagrodzić ;)
overcq
  • Rejestracja:około 7 lat
  • Ostatnio:około 3 godziny
  • Postów:393
2

Można też czytać bezpośrednio z grup styli dokumentu: https://stackoverflow.com/questions/20377835/how-to-get-css-class-property-in-javascript .


Nie znam się, ale się wypowiem.
Wizytówka
joh­nny_Be_go­od jest mistrzem ‘eskejpowania’ i osadzania.
RJ
  • Rejestracja:prawie 3 lata
  • Ostatnio:około 10 godzin
  • Postów:436
1

@misio_: bardzo miło było pomoc 😊

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.