简体   繁体   English

如何使用JavaScript更改字幕标记的样式

[英]How to change the style of a marquee tag using javascript


I am trying to change the height of a marquee tag depending on a calculation using javascript. 我正在尝试根据使用javascript的计算来更改字幕标记的高度。
I have tried this: 我已经试过了:

 /*jslint devel: true */ function maths() { "use strict"; var x = Math.floor((Math.random() * 1080) + 1); document.getElementByTagName("test").style.height = x; } window.setInterval(function () { "use strict"; maths(); }, 1); 
 marquee{ font-size: 40px; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> <intercept-url pattern="/favicon.ico" access="ROLE_ANONYMOUS"/> </head> <body> <marquee id="test" scrollamount="30" height="">test</marquee> </body> </html> 

Any help would be appreciated 任何帮助,将不胜感激

EDIT: I have successfully been able to change the height of a marquee tag using JavaScript. 编辑:我已经能够使用JavaScript成功更改字幕标记的高度。 I am following the same strategy as before but instead of changing height, i want to change the scrollAmount (the scroll speed). 我遵循与以前相同的策略,但是我不想更改高度,而是要更改scrollAmount(滚动速度)。 It does not change. 它不会改变。
Thanks 谢谢

 /*jslint devel: true */ var x = Math.floor((Math.random() * 1080) + 1); var w = Math.floor((Math.random() * 40) + 1); var section1= document.getElementById("test"); var section = document.getElementById("test"); function resize() { "use strict"; let heightLet=x.toString() + "px"; //var marqueStyle = window.getComputedStyle(section); section.style.height = heightLet; marqueStyle = window.getComputedStyle(section); } function scroll() { "use strict"; let speedLet=w.toString(); //var marqueStyle = window.getComputedStyle(section); section.style.scrollAmount = speedLet; marqueStyle = window.getComputedStyle(section); } function read(){ console.log(x); } window.onload = function () { console.log("x="+ x); console.log("w=" + w); resize(); scroll(); read(); } 
 marquee{ font-size: 40px; border: solid; position: absolute; bottom: 0; } div{ position: relative; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> <intercept-url pattern="/favicon.ico" access="ROLE_ANONYMOUS"/> <link type="text/css" rel="stylesheet" href="css/marqueestyle.css"> </head> <body onload="resize()"> <div> <section id="test"> <marquee>test</marquee> </section> </div> <script type="text/javascript" src="java.js"></script> </body> </html> 

Try this, I have added dev and section. 试试这个,我已经添加了dev和section。 Section height can change with js. 断面高度可以随js改变。 And you can use section in div like docking object.So Marque text works different height points. 而且您可以在div中像停靠对象一样使用section.So Marque文本可以使用不同的高度点。 I will glad if I help your question. 如果您能解决我的问题,我会很高兴。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <intercept-url pattern="/favicon.ico" access="ROLE_ANONYMOUS"/>
        <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body onload="resize()">
        <div>
            <section id="test">

            <marquee scrollamount="30" >test</marquee></section></div>
        <button id="btn">Click Me!</button>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

//CSS File (style.css) // CSS文件(style.css)

marquee{
    font-size: 40px;
    border: solid;
    position:  absolute;
    bottom: 0;
}

div{
    position: relative;
}

//JS file (script.js) // JS文件(script.js)

/*jslint devel: true */

function resize() {
    "use strict";
    var x = Math.floor((Math.random() * 1080) + 1);

    let heightLet=x.toString() + "px";


var section= document.getElementById("test");

     //var marqueStyle = window.getComputedStyle(section);
        section.style.height = heightLet; 
        marqueStyle = window.getComputedStyle(section);

}

window.onload= resize;

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM