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);
        }
      }

CodePudding user response：

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>&darr;</p>
<p>&darr;</p>
<p>&darr;</p>
<p>&darr;</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>&uarr;</p>
<p>&uarr;</p>
<p>&uarr;</p>
<p>&uarr;</p>
<p>&uarr;</p>
<p>&uarr;</p>
<p>&uarr;</p>
<p>&uarr;</p>
<p>&uarr;</p>
<p>&uarr;</p>

CodePudding user response：

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>