How to change a css value in javascript?

Question

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!

This sounds like an "XY problem". You're trying to modify lines of CSS, that's not how CSS is typically used. Can you explain why you're trying to do this? — Halcyon, Sep 05 '22 at 22:09

score 0 · Answer 1 · answered Sep 05 '22 at 22:21

0

Use media queries.

I don't remember the exact way to do this, but something like:

.box { width: 90%; }

@media screen and (min-width: 1000px) {
    .box { width: 40%; }
}

answered Sep 05 '22 at 22:21

Halcyon

57,230
10
89
128

score 0 · Answer 2 · answered Sep 06 '22 at 01:54

You can change the properties (e.g. width) of a CSSStyleDeclaration with its setProperty() method.

You can get a CSSStyleSheet of a specific <style> element with its sheet property.

In our case, the stylesheet's first CSSStyleRule (sheet.cssRules[0]) is for the CSS class .box. You get the CSSStyleDeclaration object of a CSSStyleRule with its style property.

Example:

const iClass = document.getElementById("i-class");
const classRule = document.getElementById("my-style").sheet.cssRules[0];

// Set input.value to initial width-value (10%)
iClass.value = classRule.style.getPropertyValue("width");

// Update width-value on each input
iClass.addEventListener("input", () => {
  classRule.style.setProperty("width", iClass.value);
});

/* Ignore; presentational styling */
.box {
  margin-bottom: .5rem;
  aspect-ratio: 1/1;
  background-color: coral;
  text-align: center;
}

<style id="my-style">
.box{
  width: 10%;
}
</style>

<div>
  <label for="i-class">Class width:</label> <input id="i-class">
</div>

<div class="box">class</div>

Unlike adding a new CSS rule, this changes the existing rule.

IT goldman · Accepted Answer · 2022-09-06T08:18:40.850

Here's one option, adding a <style> tag dynamically. This will add a style which overrides previous, obviously. See other answers for other options of changing existing rules.

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>

How to change a css value in javascript?

3 Answers3