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

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

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

<!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').children;
   console.log(lli);
   var bu3 = document.getElementsByTagName('button');
   var bu4 = document.getElementsByTagName('button');
   var bu5 = document.getElementsByTagName('button');

   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.style.position='absolute';

            lli.style.left = lie * width + 'px';
            lli.style.top = hang * height +'px';
         }
   }
</script>
</body>
</html>

是否有方法直接在css样式中的
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.lul li{
height: 90px;
width: 50px;
}
</style>
中添加

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

试一试直接操纵添加一个新style标签？
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').style.color='red'

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

抛砖引玉
document.getElementsByTagName('button').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').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

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

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

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