3

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

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

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

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

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

提前致谢。

4

1 回答 1

0

我突然想到最好使用 CSS 变量，然后从 javascript 中读取这些值，如此处所述。

这具有以下优点

  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>

于 2019-03-31T06:00:01.830 回答