已成功修改marquee高度,为何用JS修改scrollAmount不生效?
Hey Daniel! Great job getting the marquee height adjustment working—let's tackle why the scrollAmount tweak isn't cooperating. The key here is understanding the difference between CSS style properties and native marquee element attributes.
The Root of the Issue
- When you modified the height, you were targeting a CSS style property via
element.style.height—that works because height is part of the element's inline styles. - But
scrollAmountisn't a CSS property—it's a native attribute specific to the<marquee>tag. Trying to set it viaelement.style.scrollAmountwon't do anything (that property doesn't exist on the style object!).
Fixing the Scroll Speed
Here are two reliable ways to update the scrollAmount:
Option 1: Directly set the DOM property
This is the most straightforward approach:
const myMarquee = document.getElementById('your-marquee-id'); // Higher number = faster scroll speed myMarquee.scrollAmount = 6;
Option 2: Use setAttribute()
If you prefer working with HTML attributes directly, note that the attribute name is lowercase scrollamount (not camelCase):
myMarquee.setAttribute('scrollamount', '6');
Working Example
Test this out to see both the height and scroll speed update correctly:
<marquee id="demoMarquee" scrollamount="2" style="height: 100px; background: #f0f0f0;"> Scroll speed will change when you click the button! </marquee> <button onclick="adjustMarquee()">Update Marquee</button> <script> function adjustMarquee() { const marquee = document.getElementById('demoMarquee'); // Your working height adjustment marquee.style.height = '150px'; // Fixed scroll speed adjustment marquee.scrollAmount = 8; } </script>
Quick Side Note
The <marquee> tag is deprecated in HTML5, so for long-term projects, consider replacing it with a custom scroll effect using CSS animations or vanilla JavaScript. But for your current use case, the above fixes should get your scroll speed working as expected.
内容的提问来源于stack exchange,提问作者Daniel Martinez

