How to access style definitions with JavaScript in VueJS SFCs?

Question

I am doing an app where I need to extract the CSS inside the style tag in a single file component in Vue JS.

So I have this basic template:

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

Is there a way I can get with Javascript all the data inside the styles in the vue component?

Thanks, guys

do you mean css styles that you want to grab inside a variable? Or you want to style html from component — Helping hand
– Helping hand, Commented Aug 20, 2018 at 14:27
I'm curious why one needs to extract the style tag? The compiled one (if used scoped they will add [data...]), or which version?? I don't believe this is possible, or even and desired. — Loi Nguyen Huynh
– Loi Nguyen Huynh, Commented Dec 25, 2019 at 14:25
@Xan if my answer solves your bounty, please award the bounty manually, as the original author is seen 11 months ago the last time... — ux.engineer
– ux.engineer, Commented Dec 29, 2019 at 19:15

ux.engineer · Accepted Answer · 2019-12-26 09:46:24Z

There is, but you need to use CSS modules.

Vue Loader's documentation is more detailed about usage examples:

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

Vue Loader's documentation also shows how to use both the Scoped CSS and CSS Modules with this kind of Webpack config:

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

Bits Please · Accepted Answer · 2018-08-20 14:45:45Z

1

In jQuery, you can do

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

to fetch all the css properties. (you will need to do some string manipulation)

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

Here is a working example https://jsfiddle.net/kLpv30dz/

edited Aug 20, 2018 at 14:45

answered Aug 20, 2018 at 14:30

Bits Please

3381 silver badge12 bronze badges

1 Comment

af costa Over a year ago

i want to get all the css inside <style></style>, not just the background-color

bhansa · Accepted Answer · 2018-08-20 14:56:54Z

1

This answer is something different from vue, but you can extract the CSS using Javascript by using document.styleSheets

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

.wrapper{
  color: red;
}

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

answered Aug 20, 2018 at 14:56

bhansa

7,5763 gold badges35 silver badges58 bronze badges

2 Comments

af costa Over a year ago

this seems something i am looking for, but how can i distingue between diferent component styles to get the desired one if i have many component?

bhansa Over a year ago

I don't think so beacuse it will give all the stylesheets used on the page, not component wise.

Collectives™ on Stack Overflow

How to access style definitions with JavaScript in VueJS SFCs?

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related