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

Question

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

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

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

有更好的方法吗？

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

提前致谢。

Answer 1

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

这有

的优点

使用级联允许页面的多个区域各自有自己的垂直节奏。
不需要将 ::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>

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

Maintaining Vertical Rhythm on arbitrary images

javascript

json

sass

cssom