你可以使用 HTML span 标签作为容器将内联元素组合在一起,以便你可以使用 JavaScript 设置样式或操作它们。

在本文中,我将向你展示如何使用 span 标签使你的内容的某个部分与其他部分区别开来。然后你应该能够开始在你的编程项目中使用它。

span 标签有什么用

span 标签就像一个 div,用于对相似的内容进行分组,以便可以对它们设置样式。

但是 span 的不同之处在于它是一个内联元素,而不像 div 是一个块元素。

另外,请记住,除非你设置样式,否则 span 本身不会对其内容产生任何影响。

span 标签有两个主要用途——操作特定文本或给文本设置样式。

如何使用 span 标签设置文本的样式

如果你想让一些特定的文本或任何其他内容与其他内容不同,你可以将它放在一个 span 标签中,给它一个 class 属性,然后通过属性值进行样式设置。

在下面的示例中,我通过将某些文本放在 span 标签中来更改文本的颜色、背景颜色和字体样式。

如何改变文本的颜色

<p>This a <span class="crimson-text">crimson text</span> within others.</p>
.crimson-text {
      color: crimson;
   }

我添加了一些基本的 CSS 来使页面上的所有内容居中:

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }
text-color-span

如何改变背景颜色

<p>
      A <span class="green-background">green background color</span> perfectly
      implies the beauty of nature.
</p>
 .green-background {
        background-color: #2ecc71;
      }
background-color-span

如何改变字体样式

<p>
   An <span class="font-style">italic</span> font style could be instrumental
   in laying emphasis on a text.
</p>
.font-style {
     font-style: italic;
   }
font-style-span

如何用 span 标签操作 JavaScript

正如可以通过在内容周围放一个 span 标签来设置内容样式一样,你也可以通过将内容放在一个 span 标签中来操作内容。你给它一个 id 属性,然后用 JavaScript 通过它的 id 选择它,这样你就可以操作它。

在下面的示例中,我使用 JavaScript 将其他文本中的一些文本更改为大写:

<p>
   The text, <span id="uppercase"> freecodecamp</span>, was turned to
   upperase with JavaScript
</p>
const uppercase = document.querySelector("#uppercase");

uppercase.style.textTransform = "uppercase";
javascript-span

小结

在本教程中,你学习了如何使用 CSS 和 JavaScript 通过将特定文本放在 span 标签中,并为其设置唯一的 classid 属性来对其进行操作。

请注意,在这种情况下,你应该使用用于样式的 class 和用于使用 JavaScript 操作的 id 以避免混淆。

感谢你阅读本文!