JavaScript动态修改样式方法

我的站长站 2021-10-30 共人阅读

JavaScript动态修改样式方法，通过使用DOM操作和CSS样式的设置，可以实现在网页加载后根据用户输入或事件动态地改变元素的外观。这种方法常用于实现响应式设计、适应不同屏幕尺寸或响应用户交互变化的需求。

代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .lul li{
            height: 90px;
            width: 50px;
        }
    </style>
</head>
<body>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <div>
        <ul style="position: relative">
            <li style="background: red"></li>
            <li style="background: forestgreen"></li>
            <li style="background: yellow"></li>
            <li style="background: paleturquoise"></li>
            <li style="background: blue"></li>
            <li style="background: wheat"></li>
            <li style="background: darkturquoise"></li>
            <li style="background: rebeccapurple"></li>
            <li style="background: orange"></li>
            <li style="background: salmon"></li>
        </ul>
    </div>
    <script>
        var lli = document.getElementsByClassName('lul')[0].children;
        console.log(lli);
        var bu3 = document.getElementsByTagName('button')[0];
        var bu4 = document.getElementsByTagName('button')[1];
        var bu5 = document.getElementsByTagName('button')[2];
 
        bu3.onclick = function () {
            jiu(3);
        };
        bu4.onclick = function () {
            jiu(4);
        };
        bu5.onclick = function () {
            jiu(5);
        };
        function jiu(row) {
            //记录格子宽高，传递进来的是每行放几个li
            var height = 90,width = 50;
            for(var x = 0;x<lli.length;x++){
                //记录行与列
                var hang,lie;
                hang = parseInt(x/row);
                lie = x%row;
                console.log('第'+x+"个在第"+hang+"行"+lie+"列");
                //问题在这，每一个元素都要执行一遍这个赋值，是否可以直接在样式表中添加
                /*.lul li{
                       height: 90px;
                       width: 50px;
                       position: absolute;
                }
                如上
                */
                lli[x].style.position='absolute';
                 
                lli[x].style.left = lie * width + 'px';
                lli[x].style.top = hang * height +'px';
            }
        }
    </script>
</body>
</html>

javascript

2022-09-12 32

JavaScript是前端开发核心基础语言，各类网页与程序开发都离不开它。我的站长站整合全套JavaScript零基础入门教程、实战案例源码、常用功能代码片段等优质资源，覆盖...

植物大战僵尸中文Javascript版源码 [2022-06-29]
Acrobat Pro+javascript将pdf转换成带页码目录 [2022-06-25]
简单JavaScript闯关小游戏源码下载 [2021-12-25]
JavaScript动态修改样式方法 [2021-10-30]
JavaScript ES6-11版本语法大全教程 [2021-05-14]

JavaScript语法

js教程

代码示例