Question

我正在做一个应用程序，需要在Vue JS的单个文件组件中的样式标签内提取CSS。

所以我有这个基本模板：

<template>
  <div class="wrapper">
    <button class="wrapper__button" @click="sendRequest()" click me></button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    sendRequest () {
      console.log(document.getElementsByTagName("STYLE")[0].innerHTML)
      this.$http.post('http://localhost:3000/users/pdf', 'random string').then((response) => {
        console.log(response.data)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.wrapper__button {
  background-color: yellow;
}
</style>

有没有一种方法可以用Javascript获取vue组件中样式内的所有数据？

谢谢大家

Answer 1

有，但是您需要使用CSS modules。

Vue Loader的文档有关usage examples的详细信息：

UPDATE supervisorupdate SET 
    shift1PinCount = COALESCE(?, shift1PinCount),
    shift2PinCount = COALESCE(?, shift2PinCount),
    shift3PinCount = COALESCE(?, shift3PinCount),
    shift4PinCount = COALESCE(?, shift4PinCount)
WHERE Code = ?

Vue Loader的文档还显示了how to use both the Scoped CSS and CSS Modules和这种Webpack配置：

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

<script>
export default {
  created () {
    console.log(this.$style.red)
    // -> "red_1VyoJ-uZ"
    // an identifier generated based on filename and className.
  }
}
</script>

Answer 2

在jQuery中，您可以

var color = $(".wrapper__button").css("background-color"));

获取所有CSS属性。（您将需要进行一些字符串操作）

var color = $(".wrapper__button").attr('style');

这是一个可行的例子 https://jsfiddle.net/kLpv30dz/

Answer 3

此答案与vue不同，但是您可以使用document.styleSheets

使用Javascript提取CSS。

for (var i=0; i < document.styleSheets.length; i++){
  var styleSheet = document.styleSheets[i];
  console.log(styleSheet);
}

.wrapper{
  color: red;
}

<div class=".wrapper"></div>

在单个文件组件中获取样式

3 个答案: