JavaScript中如何动态的给css样式表添加样式

细雨清风琴 · 发表于 2020-2-15 15:51

本帖最后由细雨清风琴于 2020-2-15 15:53 编辑

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<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 class="lul" 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>

是否有方法直接在css样式中的

[HTML] 纯文本查看 复制代码

 <style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.lul li{
height: 90px;
width: 50px;
}
</style>

中添加

TanXin · 发表于 2020-2-15 19:57

试一试直接操纵添加一个新style标签？

[JavaScript] 纯文本查看 复制代码

function add_css(str_css){
  var style=document.createElement("style");
  style.type="text/css";
  style.innerHTML=str_css;
  document.getElementsByTagName("head").item(0).appendChild(style);
}
add_css("li{position: absolute;}")

wsz5240 · 发表于 2020-2-15 16:36

document.querySelectorAll('button')[0].style.color='red'

魔幻冰扬 · 发表于 2020-2-15 16:07

抛砖引玉
document.getElementsByTagName('button')[0].style.color='red'

细雨清风琴 · 发表于 2020-2-15 15:52

代码是九宫格的练习代码，直接复制粘贴就可以看效果了。

linguo2625469 · 发表于 2020-2-15 16:11

抛砖引玉 addclass

Aiopr · 发表于 2020-2-15 16:26

linguo2625469 发表于 2020-2-15 16:11
抛砖引玉 addclass

这是jQuery的方法吧

细雨清风琴 · 发表于 2020-2-15 16:27

本帖最后由细雨清风琴于 2020-2-15 16:28 编辑

魔幻冰扬发表于 2020-2-15 16:07
抛砖引玉
document.getElementsByTagName('button')[0].style.color='red'

引啥玉阿，我是要在css样式表里添加，不是该对象添加。我是想在ul里面所有的li里添加，不是每一个li单独添加
简单的说就行，本来是
.lul li{
height: 90px;
width: 50px;
}

要变成这样子
.lul li{
height: 90px;
width: 50px;
position: absolute;
}

细雨清风琴 · 发表于 2020-2-15 16:43

本帖最后由细雨清风琴于 2020-2-15 16:44 编辑

各位回复前能不能认真阅读完，我不是要获取该对象添加，我知道怎么在对象里添加属性，我是要在css样式里面添加，css样式！！！
简单的说，我想要所有的li标签决定定位，但是我不想for循环遍历所有li元素来一个个来添加属性，而是直接在样式表中加
像这样
li{
height: 90px;
width: 50px;
position: absolute;
}
这样就不用一个个添加属性，所有的li都有了该属性。问题是怎么添加！！！

linguo2625469 · 发表于 2020-2-15 17:49

所以你到底为什么不一开始就写上样式。你说这个肯定不行。

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] JavaScript中如何动态的给css样式表添加样式

免费评分

免费评分