Я делаю приложение, где мне нужно извлечь CSS внутри тега стиля в одном компоненте файла в Vue JS.

Итак, у меня есть этот базовый шаблон:

{amp}lt;template{amp}gt; {amp}lt;div class="wrapper"{amp}gt; {amp}lt;button class="wrapper__button" @click="sendRequest()" click me{amp}gt;{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;script{amp}gt; 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) ={amp}gt; { console.log(response.data) }) } } } {amp}lt;/script{amp}gt; {amp}lt;!-- Add "scoped" attribute to limit CSS to this component only --{amp}gt; {amp}lt;style{amp}gt; .wrapper__button { background-color: yellow; } {amp}lt;/style{amp}gt; 

Есть ли способ получить с помощью Javascript все данные внутри стилей в компоненте vue?

Спасибо ребята

Есть, но вам нужно использовать модули CSS .

В документации Vue Loader более подробно описаны примеры использования :

 {amp}lt;style module{amp}gt; .red { color: red; } .bold { font-weight: bold; } {amp}lt;/style{amp}gt; {amp}lt;template{amp}gt; {amp}lt;p :class="$style.red"{amp}gt; This should be red {amp}lt;/p{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;script{amp}gt; export default { created () { console.log(this.$style.red) // -{amp}gt; "red_1VyoJ-uZ" // an identifier generated based on filename and className. } } {amp}lt;/script{amp}gt; 

В документации Vue Loader также показано, как использовать модули Scoped CSS и CSS с этим типом конфигурации Webpack:

 { test: /.css$/, oneOf: [ // this matches `{amp}lt;style module{amp}gt;` { resourceQuery: /module/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { modules: true, localIdentName: '[local]_[hash:base64:5]' } } ] }, // this matches plain `{amp}lt;style{amp}gt;` or `{amp}lt;style scoped{amp}gt;` { use: [ 'vue-style-loader', 'css-loader' ] } ] } 

В jQuery вы можете сделать

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

чтобы получить все свойства CSS. (вам нужно будет выполнить некоторые манипуляции со строками)

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

Вот рабочий пример https://jsfiddle.net/kLpv30dz/

Этот ответ отличается от vue, но вы можете извлечь CSS с помощью Javascript с помощью document.styleSheets

 for (var i=0; i {amp}lt; document.styleSheets.length; i  ){ var styleSheet = document.styleSheets[i]; console.log(styleSheet); } 
 .wrapper{ color: red; } 
 {amp}lt;div class=".wrapper"{amp}gt;{amp}lt;/div{amp}gt;