I have a vertical line SVG inside my navbar and I want to change its stroke color on scrolling using DOM manipulation.
I am able to change background color of my navbar on scrolling and also width of SVG line using DOM manipulation but can't change stroke color I have used many methods but anyone is not working.
Please help me with the same I am providing my SVG code and JavaScript code also.
My SVG image code:-
<svg id="svg" width="4" height="71" viewBox="0 0 4 71" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="2.49985" y1="0.0214264" x2="1.49985" y2="70.0214" stroke="#FF0A0A" stroke-width="8"/>
</svg>
My JAVASCRIPT code:-
useEffect(() => {
window.onscroll = function() {scrollFunction()};
})
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
// document.getElementById("header").style.background = "red";
// document.getElementById("header").style.transition = "0.70s";
// document.getElementById("logotext").style.color = "white";
// document.getElementById("svg").stroke="red"
// document.getElementById("svg").style.stroke="red"
document.getElementById("svg").setAttribute("stroke","red")
console.log( document.getElementById("svg").stroke);
} else {
document.getElementById("header").style.background = "";
document.getElementById("svg").setAttribute("stroke","white")
console.log( document.getElementById("svg").stroke);
}
}
Try to select with querySelector("svg > line"):
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.querySelector("svg > line").setAttribute("stroke","red")
} else {
document.querySelector("svg > line").setAttribute("stroke","white")
}
}<p>↓</p>
<p>↓</p>
<p>↓</p>
<p>↓</p>
<svg id="svg" width="4" height="71" viewBox="0 0 4 71" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="2.49985" y1="0.0214264" x2="1.49985" y2="70.0214" stroke="#FF0A0A" stroke-width="8"/>
</svg>
<p>↑</p>
<p>↑</p>
<p>↑</p>
<p>↑</p>
<p>↑</p>
<p>↑</p>
<p>↑</p>
<p>↑</p>
<p>↑</p>
<p>↑</p>Alternative, and easier when you want to change multiple CSS selectors and properties,
is to toggle the disabled state of a whole <style id="scrolled"> tag
With some extra logic you could even manage multiple scrollTop
eg. scrolled_over_50 positions by looping over all document.querySelectorAll('style[id^="scrolled"]') elements.
window.onscroll = function() {
document.querySelector("#scrolled")
.disabled = !document.documentElement.scrollTop
}<style>
* { height:35vh }
p { background:pink }
#svg1 rect { fill:blue }
</style>
<style id="scrolled" onload="this.disabled=true">
#svg1 { background:green }
#svg1 rect { fill:lightgreen }
</style>
<p></p>
<svg id="svg1" viewBox="0 0 100 50" >
<rect x="10%" y="10%" width="80%" height="80%"/>
</svg>
<p></p>