How to change a css value in javascript?

So I want to change a css value in javascript, without having an element in html, I’ll explain like:

<style>
.box{
width: 10%;
}
</style>
<script>
// I want to change the width value of (.box) to something like "90%" 
</script>

So what I mean to say is that I want to change the (.box) width value between the two style tags, I know my question sounds weird, but am just new coding and I really need it, any help appreciated!

>Solution :

Here’s one option, adding a <style> tag dynamically

var inline_style = `
  .box {
    width: 90%; 
    background: pink; 
  }`;

// from https://stackoverflow.com/a/28662118/3807365
document.head.insertAdjacentHTML("beforeend", '<style>' + inline_style + '</style>')
.box {
  width: 10%;
  background: blue;
}
<div class="box">i'm a box</div>

Leave a Reply