Question

我遇到一个问题，我将显示一个可变数量的项目，并且它们将有一个边距设置，该设置在该集合上均匀更新。

所以基本上如果我有一个 [1,2,3,4,5] 的集合就可以这样简单：

1        2        3        4        5

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

1   2   3   4   5   6   7   8   9   10

我有一些解决方案，但是让我感到震惊的是，如果我有一个css-class（由于边缘在给定集合上是均匀的），我可以分享布局。所以如果有可能动态更新类，我会喜欢它，如果有意义我没有找到任何可能的信息，所以如果我们假设在第一个例子中，边距是{{1然后，如果我可以更改类，（类似于我在元素上设置margin-right: 10px;的方式，我猜我是在思考，但对于整个类），它会非常顺利。所以让我们假设一个功能，我可以有一个类：

style

并通过我们的 magic 函数.myclass { margin-right: 10px; }（或者不管语法如何：P）。它就好像我已经定义了这个类：

.myclass.setProperty('margin-right', '5px');

我希望到目前为止，这足以把握我的想法和问题。我现在谈论它的方式是我为所有共享行为使用一个类并为每个元素设置样式。然而，这有点单调乏味，因为它变得像：

.myclass {
    margin-right: 5px;
}

for (var i in mynumbers) { mynumbers.style.marginRight = new_margin; }根据比例计算（即可能在短时间内多次改变）。

所以问题部分。有没有办法实现像第一部分（动态改变一个类的方法），或任何想法或想法如何实现它，如果我这样做的感觉是一个坏主意或如果你觉得有更好的处理这个的方法。

感谢阅读并希望您发现问题很有趣。

Answer 1

啊，只是 flex 布局的另一个典型用例：

.container {
  display: flex;
  border: 1px solid;
  justify-content: space-between;
}

<h2>5 elements in a line with equal width gaps</h2>
<div class="container">
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>

<h2>10 elements in a line with equal width gaps</h2>
<div class="container">
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
  <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
</div>

如果您的浏览器支持该功能，您会看到如下内容： enter image description here

此处为browser compatibility。

编辑：另一个有趣的用例，虽然OP没有询问：

.container {
  display: flex;
  border: 1px solid;
  justify-content: space-between;
}
.container:before, .container:after {
  content: '';
  width: 0;
}

<h2>5 elements in a line with equal width gaps</h2>
<div class="container">
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>

<h2>10 elements in a line with equal width gaps</h2>
<div class="container">
  <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
  <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
</div>

如果您的浏览器支持该功能，您会看到如下内容： enter image description here

空间不仅在元素之间平均分配，而且还包括容器的两端。你可以看到代码有多简单！

Answer 2

这听起来像是table-layout: fixed的工作。您的浏览器根据“表格”中的列数计算第一个“表格行”中每个“列”（元素）的宽度。

.table {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.table > span {
    display: table-cell;
    text-align: center;
}

<div class="table">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
</div>

<div class="table">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
</div>

Answer 3

是。这个有可能。需要注意的一点是，更改类的属性可能会导致浏览器的渲染器重新计算整个页面的布局（它需要弄清楚类更改如何影响整体布局）。因此，如果您计划以某种方式更改边距权限，以便为更改设置动画，则根据页面的复杂程度，它的效果不会很好。也就是说，这是一个快速而又脏的实现，应该适用于所有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>

css中的动态或适应性类

3 个答案: