javascript - 在任意图像上保持垂直节奏

Question

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

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

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

有更好的方法吗？

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

提前致谢。

Answer 1

我突然想到，最好使用 CSS 变量，然后按照记录从 javascript 中读取这些值 here .

这样做的好处是

1. 使用级联允许页面的多个区域各自有自己的垂直节奏。
2. 不需要将 ::after 伪元素的内容解析为 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>