我的導航條內有一個垂直線SVG，我想用DOM操作來改變它在滾動時的筆觸顏色。
我能夠在滾動時改變導航條的背景顏色，也能夠使用DOM操作改變SVG線條的寬度，但是不能改變筆畫的顏色，我已經使用了很多方法，但是任何人都無法作業。
請幫助我解決這個問題，我提供了我的SVG代碼和JavaScript代碼。
我的SVG影像代碼：-
< svg id="svg"/span> width="4"/span> height="71" viewBox="0 0 4 71" fill="none" xmlns="http: //www. w3.org/2000/svg">。
<line x1="2。 49985"/span> y1="0.0214264"/span> x2="1. 49985" y2="70. 0214" stroke="#FF0A0A" stroke-width="8"/>
</svg>/span>
我的JAVASCRIPT代碼：-
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"/span>)。 setAttribute("stroke"/span>,"red")
console.log( document. getElementById("svg").stroke）。)
} else {
document.getElementById("header"/span>)。 style.background = "";
document.getElementById("svg") 。 setAttribute("stroke"/span>,"white")
console.log( document. getElementById("svg").stroke）。)
}
uj5u.com熱心網友回復：
嘗試用querySelector("svg > line")來選擇：
window。 onscroll = function() {scrollFunction()}。
function scrollFunction（） {
if (document.body。 scrollTop > 50 || document. documentElement.scrollTop > 50) {
document.querySelector("svg > line") 。 setAttribute("stroke"/span>,"red")
} else {
document.querySelector("svg > line") 。 setAttribute("stroke"/span>,"white")
}<p> ↓</p>
<p>& darr;</p>
<p>& darr;</p>
<p>& darr;</p>
< svg id="svg"/span> width="4"/span> height="71" viewBox="0 0 4 71" fill="none" xmlns="http: //www. w3.org/2000/svg">。
<line x1="2。 49985"/span> y1="0.0214264"/span> x2="1. 49985" y2="70. 0214" stroke="#FF0A0A" stroke-width="8"/>
</svg>/span>
<p>↑/span></p>/span>
<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>↑</p> uj5u.com熱心網友回復：
另一種方法，當你想改變多個CSS選擇器和屬性時更容易，
。
是切換整個<style id="scrolled">標簽的disabled狀態
通過一些額外的邏輯，你甚至可以管理多個scrollTop
例如。scrolled_over_50位置，通過在所有document.querySelectorAll('style[id^="scrolled"]')元素上回圈。
window.onscroll = function() {
document.querySelector("#scrolled"/span>)
.disabled = !document.documentElement.scrollTop.
}<style>/span>
* { height:35vh }
p { background: pink }
#svg1 rect { fill:blue }
</style>>
<style id="rolled" 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%"/span> y="10%" width="80%" height="80%"/>
</svg>
<p></p> 轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/320128.html
標籤：
上一篇：ExtJS繼承配置