为什么没有应用内联变换 styles

Question

So what I'm trying to do is map each character of a string to a span.所以我想做的是 map 字符串的每个字符到一个跨度。 With each span, I'm using inline styles in order to dynamically change the y position of the character based on the current position in the string.对于每个跨度，我使用内联 styles 以便根据字符串中的当前 position 动态更改字符的 y position。 I then take this span string and add it to a variable which in the end will contain all of the characters converted to spans, and then output this into the DOM using innerHTML.然后我将这个 span 字符串添加到一个变量中，该变量最终将包含所有转换为 span 的字符，然后使用 innerHTML 将 output 放入 DOM。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p id="output"></p>
  </body>
  <script>
    const text = "the dog jumped over the fence";

    let output = "";

    let i = 0;
    for (char of text) {
      output += `<span style="transform: translateY(${i}px)">${char}</span>`;
      i += 1;
    }

    document.querySelector("#output").innerHTML = output;
  </script>
  <style>
    body {
      background-color: black;
    }
    span {
      color: green;
    }
  </style>
</html>

However, none of my styles that have to do with transform are being applied externally.但是，我的与变换有关的 styles 都没有在外部应用。 I've checked the developer console and the spans do indeed have the styles that I wanted, but they're not being applied on the actual page.我检查了开发人员控制台，跨度确实有我想要的 styles，但它们并没有应用于实际页面。 [1] https://i.stack.imgur.com/MoDnq.png [1] https://i.stack.imgur.com/MoDnq.png

The strange thing is this only seems to be happening for the transform CSS property.奇怪的是，这似乎只发生在变换 CSS 属性中。 When I edit the font size for each span using the current position, I get the expected output.当我使用当前的 position 编辑每个跨度的字体大小时，我得到了预期的 output。

/* When I change the for loop to adjust the font size instead of using transform */
for (char of text) {
      output += `<span style="font-size: ${i}px">${char}</span>`;
      i += 1;
    }

this is what I get: [1]: https://i.stack.imgur.com/0dk21.png这就是我得到的：[1]： https://i.stack.imgur.com/0dk21.png

Answer 1

When you attempt to translate the span elements vertically, you don't see a change because of how inline elements work in HTML.当您尝试垂直平移span元素时，由于内联元素在 HTML 中的工作方式，您看不到任何变化。

If you want to apply a translation to the span s, you need to first change their display style to inline-block , which will let you apply a transformation to them while keeping them in the same line.如果要对span应用平移，首先需要将它们的显示样式更改为inline-block ，这样您就可以对它们应用变换，同时保持它们在同一行。

#output span { display: inline-block; }

From the w3 css wiki :来自w3 css wiki ：

transformable element可变形元素

A transformable element is an element in one of these categories:可变形元素是属于以下类别之一的元素：

all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes [CSS2]其布局由 CSS 框 model 管理的所有元素，除了不可替换的内联框、表列框和表列组框 [CSS2]

all SVG paint server elements, the clipPath element and SVG renderable elements with the exception of any descendant element of text content elements [SVG2]所有 SVG 绘制服务器元素、clipPath 元素和 SVG 可渲染元素，文本内容元素的任何后代元素除外 [SVG2]

Answer 2

CSS Transform only works on block element. CSS 变换仅适用于块元素。 Change your span into a block element.将您的span更改为块元素。

span {
      display: inline-block;
      color: green;
    }

为什么没有应用内联变换 styles

问题描述

2 个解决方案

解决方案1
0 已采纳 2021-12-31 00:30:50

解决方案2
0 2021-12-31 00:54:06

为什么没有应用内联变换 styles

问题描述

2 个解决方案

解决方案1 0 已采纳 2021-12-31 00:30:50

解决方案2 0 2021-12-31 00:54:06

解决方案1
0 已采纳 2021-12-31 00:30:50

解决方案2
0 2021-12-31 00:54:06