Javascript css中的动态或可调整类_Javascript_Css

Javascript css中的动态或可调整类

javascript css

Javascript css中的动态或可调整类,javascript,css,Javascript,Css,我有一个问题，我将显示一个可变数量的项目显示，他们将有一个边距设置，这是统一更新的集合因此，简单地说，如果我有一个集[1,2,3,4,5]，它可能是这样的： 1 2 3 4 5 for (var i in mynumbers) { mynumbers.style.marginRight = new_margin; } 而如果数量加倍，则需要相同数量的空间： 1 2 3 4 5 6 7 8 9

我有一个问题，我将显示一个可变数量的项目显示，他们将有一个边距设置，这是统一更新的集合

因此，简单地说，如果我有一个集[1,2,3,4,5]，它可能是这样的：

1        2        3        4        5

for (var i in mynumbers) {
    mynumbers.style.marginRight = new_margin;
}

而如果数量加倍，则需要相同数量的空间：

1   2   3   4   5   6   7   8   9   10

我对此有一些解决方案，但让我印象深刻的是，如果我有一个

css类

（因为给定集合上的边距是一致的），我可以共享布局。因此，如果可以动态地更新类，我会喜欢它，如果这有意义的话，我还没有发现任何关于这方面的信息，因此如果我们假设在第一个示例中，边距类似于

margin right:10px然后如果我可以更改类（类似于我在元素上设置样式
的方式，我想这是我的想法，但对于整个类来说），它将非常平滑。因此，让我们假设一个功能来实现这一点，我可以有一个类：
.myclass {
    margin-right: 10px;
}

通过我们的神奇函数.myclass.setProperty（'margin-right'，'5px'）（或任何语法：P）。这就像我定义了类一样：
.myclass {
    margin-right: 5px;
}

我希望这足以理解我迄今为止的想法和问题。我目前的做法是，我为所有共享行为使用一个类，并为每个元素设置样式。然而，这有点乏味，因为它变得像：
1        2        3        4        5

for (var i in mynumbers) {
    mynumbers.style.marginRight = new_margin;
}

其中，new_margin
是根据一个量表计算的（即，它可能在短时间内改变多次）
那么问题部分。是否有一种方法可以实现第一部分（一种动态更改类的方法），或者如果我这样做感觉不好，或者如果您觉得有更好的方法来处理这个问题，那么有什么想法或想法如何实现它
感谢您的阅读，希望您对这个问题感兴趣。
这听起来像是一份适合您的工作。浏览器根据“表”中的列数计算第一个“表行”中每个“列”（元素）的宽度

.table{
显示：表格；
表布局：固定；
宽度：100%；
}
.表格>跨度{
显示：表格单元格；
文本对齐：居中；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
1.
2.
3.
4.
5.
是。这是可能的。需要注意的一点是，更改类的属性可能会导致浏览器的呈现程序重新计算整个页面的布局（它需要了解类的更改如何影响总体布局）。因此，如果您计划以动画的方式正确地更改页边距，那么根据页面的复杂性，它的性能不会很好。这就是说，这里有一个快速而肮脏的实现，应该适用于所有IE9+：
<html>
<head>
<style>
.thing {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #f00;
}
</style>
</head>
<body>
<div>
    <div class="thing myClass"></div>
    <div class="thing myClass"></div>
    <div class="thing myClass"></div>
    <div class="thing myClass"></div>
    <div class="thing myClass"></div>
    <div class="thing myClass"></div>
</div>

<div>
<button id="doit">Make bigger</button>
</div>
</body>
<script>
var styleTag = document.createElement("style"),
    styleSheet, index, cssRule, style;

// Create a <style> tag that will hold our CSS rule
document.head.appendChild(styleTag);
styleSheet = styleTag.sheet;

// Insert an empty .myClass rule into the style sheet
index = styleSheet.insertRule(".myClass {}", styleSheet.cssRules.length);

// Get the 'style' object from the rule. This is nearly identical to elem.style
cssRule = styleSheet.cssRules[index];
style = cssRule.style;

// Sets .myClass { margin-right: 5px; }
style.marginRight = "5px";

// Demo to show that it works when you click a button
document.querySelector("#doit").addEventListener("click", function() {
    style.marginRight = "20px";
});

</script>
</html>


.事情{
显示：内联块；
宽度：20px；
高度：20px；
背景：#f00；
}
做大
var styleTag=document.createElement（“样式”），
样式表，索引，cssRule，样式；
//创建一个包含CSS规则的标记
document.head.appendChild（样式标签）；
styleSheet=styleTag.sheet；
//在样式表中插入空的.myClass规则
index=styleSheet.insertRule（“.myClass{}”，styleSheet.cssRules.length）；
//从规则中获取“样式”对象。这与elem样式几乎相同
cssRule=styleSheet.cssRules[index]；
style=cssRule.style；
//Sets.myClass{margin right:5px；}
style.marginRight=“5px”；
//演示如何在您单击按钮时显示其工作
document.querySelector（“#doit”）.addEventListener（“单击”，函数（）{
style.marginRight=“20px”；
});
啊，这只是flex布局的另一个典型用例：

.container{
显示器：flex；
边框：1px实心；
证明内容：之间的空间；
}
5个元素在一行中具有相等的宽度间隙
12345
一条线中的10个元素具有相等的宽度间隙
12345
678910
Flexbox是你的朋友。@torazaburo很高兴看到有人和我持有相同的观点。到了2010年，人们仍然坚持使用表布局，甚至可以支持上个世纪的浏览器，这很可悲……是的，让我们都采用*{display:flex；}
方法吧！