javascript - 如何使用 javascript 更改选取框标签的样式

标签 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 更改选取框标记的高度。我遵循与以前相同的策略,但我不想改变高度,而是想改变 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>

最佳答案

试试这个,我已经添加了 dev 和 section。 section height可以随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;

关于javascript - 如何使用 javascript 更改选取框标签的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49119135/

相关文章:

javascript - 如何检测悬停时的前一个元素?

html - 鼠标悬停时如何更改整个网站背景颜色

javascript - 如何获取最新的提交日期 - Github API

javascript - 我无法在 JavaScript 中获取要打印到文本区域的属性值,出现错误 : Uncaught TypeError: Cannot read property 'value' of null

php - 为什么 php 函数 asXML() 在响应中包含 html 标签?

css - 有一个可点击的图像来打开 wordpress 中的嵌入内容 - Space Invaders

html - 如何在 Safari 中将 flex 容器的绝对定位子项居中?

javascript - 为什么 Object.create() 和 new Object() 计算出不同的原型(prototype)?

javascript - JS - 如何根据输入值设置 div 的宽度和高度?

javascript - 如果我们从数据库获取数据,则使用 javascript 和 codeigniter 向下滚动不起作用