在任意图像上保持垂直节奏答案

【问题标题】：Maintaining Vertical Rhythm on arbitrary images在任意图像上保持垂直节奏
【发布时间】：2019-08-20 04:44:01
【问题描述】：

我希望能够在包含未知高度的图像的页面上保持垂直节奏。我找到了this，但我使用的是vanilla-js而不是jquery，所以jquery插件是不可能的。另一个答案要求在 javascript 中设置基线。我已经在我的 SCSS 文件中设置了它！我是一个非常懒惰的程序员，不想输入两次。等等，我没这么说。我的意思是我担心在整个地方复制硬编码值的可维护性。

here 是另一个我不得不拒绝的解决方案，因为我不喜欢所有关于样式问题的额外标记。这让我想起了那些为了获得圆角而不得不将 <div> 标签嵌套四层的日子。

我想到使用生成的内容将 JSON 传递给 javascript。我以为我是个天才，但后来发现this 使用完全相同的方法示例。

有没有更好的方法来做到这一点？

我真正想要的是一种方法来指定元素的高度需要是某个给定值的倍数。真的没有办法只用 CSS 做到这一点吗？我看到的答案说没有。我觉得calc 可以几乎完成这项工作，但还不够聪明，无法弄清楚。有没有更好的方法来获取 javascript 的价值？

提前致谢。

【问题讨论】：

请给我们一些代码来快速重现您的问题。
@MaciejS 没有可发布的代码，因为我不要求修复错误。我链接到的first 问题有一个很好的图形显示我想要的。为什么要重新发明轮子？
哈哈只是对写作风格笑得太厉害了？？？？

标签： javascript json sass cssom

【解决方案1】：

我想到最好使用 CSS 变量，然后从 javascript 中读取这些值，如 here 所记录的那样。

这样的好处

使用级联允许页面的多个区域每个区域都有自己的垂直节奏。
不需要将::after psuedo-element 的内容解析为JSON。对于 content 属性中转义嵌入引号的方式，浏览器显然不一致。

一个缺点是自定义属性不像伪元素那样被广泛支持。这种方式将在更多浏览器上中断。因为它只是装饰性的，我觉得可以接受。

const foo = document.getElementsByClassName('foo')[0];
const bar = document.getElementsByClassName('bar')[0];
const fooStyles = window.getComputedStyle(foo);
const barStyles = window.getComputedStyle(bar);
const fooVR = fooStyles.getPropertyValue('--vertical-rhythm');
const barVR = barStyles.getPropertyValue('--vertical-rhythm');

foo.innerHTML = '--vertical-rhythm: ' + fooVR;
bar.innerHTML = '--vertical-rhythm: ' + barVR;

:root {
  line-height: 1.5rem;
  /* $line-height */
  --vertical-rhythm: 3rem;
  /* 2 * $line-height */
}

.foo {
  --vertical-rhythm: 6rem;
  /* 4 * $line-height */
}

<div class="foo"></div>
<div class="bar"></div>

【讨论】：