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

1

Dzień dobry.

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

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

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

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

Dzięki.
M.

3

Dżepetto po pytaniu odpowiada:

<!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...

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ść)?

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.

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?

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

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

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

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

 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);
}
2

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

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.