如何使用javascript更改选框标记的样式

时间:2018-03-05 20:43:41

标签: javascript html css


我试图根据使用javascript的计算来更改选框标记的高度。我试过这个:

/*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>

任何帮助将不胜感激

修改 我已经成功地使用JavaScript更改了marquee标记的高度。我遵循与以前相同的策略,但不是改变高度,我想改变scrollAmount(滚动速度)。它没有改变。
感谢

/*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>

1 个答案:

答案 0 :(得分:0)

试试这个,我添加了dev和section。截面高度可以随js变化。并且您可以使用div中的部分,例如停靠对象。因此,Marque文本可以使用不同的高度点。 如果我帮助你,我会很高兴的。

<!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文件(style.css)

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

div{
    position: relative;
}

// 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;