欢迎光临精准像素,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

js教程

JavaScript动态修改样式方法

js教程 精准像素 2021-10-30 共10人阅读

代码示例

<!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语法
  • JavaScript ES6-11版本语法大全教程
    JavaScript ES6-11版本语法大全教程

    视频教程说明JavaScript ES6-11版本语法大全教程,共77课时,淘宝购买免费分享给大家。JavaScript ES6教程截图课程列表9-7 空值合并运算符:Nullish coalescing Operator_.mp49-6 可选链:Optional chai...

    视频教程 18 6个月前
  • javascript制作随机样式标签云方法
    javascript制作随机样式标签云方法

    精准像素分享一段超简单的javascript随机样式标签云方法,比网上那些长篇大论的简单好理解多了,一看就懂,效果如下。JS代码$(".tags a").each(function(){var x = 5;var y = 9;var rand = parseInt(M...

    js教程 38 1年前
  • JavaScript优雅地修改对象属性名

    在项目开发中总会需要对对象进行格式化以便处理,这其中就涉及到了修改对象的属性名,也就是对象键名的修改。比如在处理下面这个对象时const obj = {name :Bobo &#39;,job: &#39; Master&#39;,number: 1234};采用传统的操作方式就是进行一个拷贝处理obj [...

    js教程 102 10个月前
  • JavaScript保留两位小数,自动补零

    将传来的数值或字符串,转换为浮点数。然后将小数点向右移动两位小数,再利用Math.round()方法进行四舍五入计算,最后除以100,这样实现保留两位小数。var value = Math . round( parseFloat(num) * 100 ) / 100;去掉逗号,将数值存到数组中var arrayNum = va...

    js教程 63 9个月前
  • JavaScript语法参考手册.pdf
    JavaScript语法参考手册.pdf

    JavaScript语法参考手册,主要分为:JavaScript 函数、JavaScript 方法、JavaScript 对象、JavaScript 属性、JavaScript 语句JavaScript手册截图

    电子书 15 8个月前