首页 > 解决方案 > 如何在使用 JavaScript 的 vue-cli 编译的代码中获取类的 CSS?

问题描述

我需要获取与 HTML 中每一类代码相对应的 CSS 代码。HTML 代码如下:

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

我需要使用 JavaScript 获取每个类的 CSS 属性(最好没有 Jquery)。

例如,我需要使用 JavaScript 获取 flex-column、align-center、pa-0 和 col 的 CSS 属性。

我已经使用了window.getComputedStyle(),但是我不想获取所有的CSS属性,我只需要每个类对应的那些,然后创建一个CSS文件根据它们的类对属性进行分类。

作为附加信息,HTML 代码是由 vue-cli 和 Material Design Vuetify 库生成的。

标签: javascripthtmlcssvuetify.jsvue-cli

解决方案


推荐阅读