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!
I think what you’re looking for is el.style.backgroundColor
1 Like
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… @Gandalf ’s solution will work in all browsers though.
2 Likes
Hello @Gandalf , 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!
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
That’s what the el.
is for.
1 Like
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.
I had rather assumed that myelement
was pointing to the element you wanted to change.
But that element also is using the another backgrounds
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.)
system
Closed
November 16, 2018, 10:50pm
11
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.