0

I need to get the CSS code that corresponds to each class of a code in HTML. The HTML code is as follows:

<div data-v-52a38b90="" class="flex-column align-center pa-0 col">
    <div data-v-52a38b90="" class="row flex-row-reverse align-center ma-0">
        <button data-v-52a38b90="" type="button" class="ml-auto mr-6 my-4 v-btn v-btn--icon v-btn--round theme--light v-size--default red--text">
            <span class="v-btn__content"><i data-v-52a38b90="" aria-hidden="true" class="v-icon notranslate mdi mdi-close theme--light"></i></span>
        </button>
        <div data-v-52a38b90="" class="v-card__title ml-7">Titulo</div>
    </div>
    <div data-v-52a38b90="" class="row d-flex align-center ma-0">
        <div data-v-52a38b90="" class="mx-auto my-0 v-card v-sheet theme--light" style="height: 610px; width: 450px; background-color: rgb(221, 221, 221); border-color: rgb(221, 221, 221);">
            <div data-v-52a38b90="" class="v-card__text">
                <div data-v-52a38b90="" id="virtual_scroll"><div data-v-52a38b90="" class="d-flex flex-column"></div></div>
            </div>
        </div>
    </div>
    <div data-v-52a38b90="" class="row d-flex mx-auto my-0" style="width: 450px;">
        <div data-v-52a38b90="" class="v-input ma-0 v-input--hide-details theme--light v-text-field v-text-field--single-line v-text-field--solo v-text-field--is-booted v-text-field--enclosed">
            <div class="v-input__control">
                <div class="v-input__slot">
                    <div class="v-text-field__slot"><input id="input-43" type="text" /></div>
                    <div class="v-input__append-inner">
                        <button data-v-52a38b90="" type="button" class="v-btn v-btn--icon v-btn--round theme--light v-size--default">
                            <span class="v-btn__content"><i data-v-52a38b90="" aria-hidden="true" class="v-icon notranslate mdi mdi-send theme--light"></i></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I need to get the CSS properties of each class using JavaScript (better without Jquery).

For example, I need to get the CSS properties of flex-column, align-center, pa-0 and col using JavaScript.

I have already used window.getComputedStyle (), but I don't want to get all the CSS properties, I only need those corresponding to each class, and then create a CSS file classifying the properties according to their class.

As additional information, the HTML code was generated by vue-cli and the Material Design Vuetify library.

Xaime Pardal
  • 61
  • 4
  • What would you do with the CSS rules defined in the stylesheet(s)? – Teemu Jun 01 '21 at 12:14
  • I would save them in a javascript variable to display on the screen. Allowing the web user to replicate the "view" of that html using the css obtained. @Teemu – Xaime Pardal Jun 01 '21 at 12:23
  • This is not a trivial task. You've to get the class names of the elements, then you could apply the code [in this my answer](https://stackoverflow.com/a/17454470/1169519) to ex. enter the rules into an array instead of changing the value. – Teemu Jun 01 '21 at 12:26
  • The only way I can think of to get what you want would be toggling each of the classes and comparing the computed styles before and after. This will definitely not be easy – charlietfl Jun 01 '21 at 12:27
  • 1
    Thank you very much. Your other post has been a great help to me. @Teemu – Xaime Pardal Jun 02 '21 at 10:31
  • Yeah, thought that code is ancient, it still seems to work. I was just testing it. – Teemu Jun 02 '21 at 10:37

0 Answers0