Question

所以我有些人想要使用特殊的班级标题，以便他们可以更改div的填充。我很快创建了一个名为.columnpadding的类，以便他们可以这样做。后来，我被要求再做几节课，以便他们可以更改多页的填充。不必一遍又一遍地复制css类并为每个类更改填充，我可以通过类标题来更改变量。

例如。

如果班级标题为.columnpadding-100 有没有一种方法可以使类的填充为100px？

我的网站在Php and Less上运行。让我知道编码是否太复杂。我希望它不是太疯狂了！谢谢！

Answer 1

因此，我们假设我们具有以下基本结构：

div {
  border: 1px solid black;
  height: 10px;
  width: 10px;
}

<div class="columnpadding-50"></div>
<div class="columnpadding-30"></div>
<div class="dontchangeme"></div>
<div class="columnpadding-10"></div>

仅使用香草JS，我们就可以轻松实现所需的结果：

var divs = document.querySelectorAll("div[class^='columnpadding-']");

for (let i = 0; i < divs.length; i++){
  let psize = divs[i].getAttribute('class');
  psize = psize.substring(psize.indexOf('-') +1, psize.length);
  divs[i].style.padding = psize + 'px';
}

div {
  border: 1px solid black;
  height: 10px;
  width: 10px;
}

<div class="columnpadding-50"></div>
<div class="columnpadding-30"></div>
<div class="dontchangeme"></div>
<div class="columnpadding-10"></div>

我们首先在其中将值div的所有columnpadding-个包含类的元素都选择到NodeList中
然后，我们检索每个class属性的字符串，并从substring -接收它的大小
最后但并非最不重要的一点，我们将style.padding应用于NodeList中选定的元素

然后voilà产生预期的结果！

Answer 2

使用JQuery

CSS-不需要，但此处为示例

div {
    display: inline-block;
}

HTML

<div class="columnpadding-100">This has 100 padding
</div>
<div class="columnpadding-50">This had 50 padding
</div>

javascript / jQuery

$(document).ready(function(){ // wait until the page is completely loaded
    $("[class^='columnpadding-']").each(function(){ // get every element that has a class starting with "columnpadding-"
        let classNamesString = $(this).attr('class'); // get the string of class nameS from this element
        let classNames = classNamesString.split(" "); // create an array of class names
        $.each(classNames, function(index, className){ // loop through the class names looking for the one we want
            if (className.startsWith("columnpadding-")) { // hey, this is the one we want
                let amount = className.substring(14); // get the amount after the hyphen
                $("." + className).css("padding", amount + "px"); // set the css for the padding on the element
            }
        });
    });
});

有没有一种方法可以通过CSS类标题编辑CSS变量？

2 个答案: