Edit custom style using javascript

#1

Hello, I’m using a .css file in my header.
Inside the .css there’s a line:

[data-filepond-item-state='processing-complete'] .filepond--item-panel {
  background-color: #369763;
}

Do I want to give my users the ability to choose the background color, how I can change that color using javascript?

I tried to do:

  	const el = document.querySelector(myelement);
		el.style.position = "absolute";

But not sure where to add all that line

Thanks!

#2

I think what you’re looking for is el.style.backgroundColor

#3

The most versatile way would be with CSS variables:

:root {
  --background-color: #369763;  
}

[data-filepond-item-state='processing-complete'] .filepond--item-panel {
  background-color: var(--background-color);
}

Then you can do something like

<label>
  Choose background colour:
  <input type="color" id="color-picker">
</label>


colorPicker.addEventListener('change', () => {
  document.documentElement.style.setProperty(
    '--background-color', 
    colorPicker.value
  )
})

Unfortunately there’s no IE support and probably never will be… @gandalf458’s solution will work in all browsers though.

#4

Hello @gandalf458, thank you for your answer.

But that will not affect the other background-colors in the .css?
How this:
el.style.backgroundColor

is referencing to only that background color?

Thanks!

#5

Thank for your answer @m3g4p0p

But in your example are you using :root?
What does that do?

In my case, I can’t edit the.css file

#6

That’s what the el. is for.

#7

No, that’s not what I mean.

This is a piece of the .css file:

.filepond--item-panel {
  background-color: #64605e;
}

[data-filepond-item-state='processing-complete'] .filepond--item-panel {
  background-color: #369763;
}

[data-filepond-item-state*='invalid'] .filepond--item-panel,
[data-filepond-item-state*='error'] .filepond--item-panel {
  background-color: #c44e47;
}

How is this:
el.style.backgroundColor

Referencing only to this background:

[data-filepond-item-state='processing-complete'] .filepond--item-panel {
  background-color: #369763;
}

Thanks.

#8

I had rather assumed that myelement was pointing to the element you wanted to change.

#9

But that element also is using the another backgrounds

#10

It matches the root element of the document; this makes sure that the variables cascade down to every other element, and are directly accessible with JS via document.documentElement.

In this case you can still override the styles manually by appending your own… for example:

var setBackgroundColor = function (selector, color) {
  var style = document.createElement('style')
  style.textContent = selector + '{background-color:' + color + ';}'
  document.head.appendChild(style)
}

setBackgroundColor(
  '[data-filepond-item-state="processing-complete"] .filepond--item-panel', 
  '#ff000'
)

(PS: If you do this a lot this will however pile up style sheets… so you might also keep track of the added styles and just replace them where necessary.)