样式

我们看到了不同的 HTML 元素的绘制是不同的。一些元素显示为块,一些则是以内联方式显示。我们还可以添加一些样式,比如使用<strong>加粗内容,或使用<a>使内容变成蓝色,并添加下划线。

<img>标签显示图片的方式或点击标签<a>时跳转的链接都和元素类型紧密相关。但元素的默认样式,比如文本的颜色、是否有下划线,都是可以改变的。这里给出使用style属性的示例。

  1. <p><a href=".">Normal link</a></p>
  2. <p><a href="." style="color: green">Green link</a></p>

样式属性可以包含一个或多个声明,格式为属性(比如color)后跟着一个冒号和一个值(比如green)。当包含更多声明时,不同属性之间必须使用分号分隔,比如color:red;border:none

文档的很多方面会受到样式的影响。例如,display属性控制一个元素是否显示为块元素或内联元素。

  1. This text is displayed <strong>inline</strong>,
  2. <strong style="display: block">as a block</strong>, and
  3. <strong style="display: none">not at all</strong>.

block标签会结束其所在的那一行,因为块元素是不会和周围文本内联显示的。最后一个标签完全不会显示出来,因为display:none会阻止一个元素呈现在屏幕上。这是隐藏元素的一种方式。更好的方式是将其从文档中完全移除,因为稍后将其放回去是一件很简单的事情。

JavaScript 代码可以通过元素的style属性操作元素的样式。该属性保存了一个对象,对象中存储了所有可能的样式属性,这些属性的值是字符串,我们可以把字符串写入属性,修改某些方面的元素样式。

  1. <p id="para" style="color: purple">
  2. Nice text
  3. </p>
  4. <script>
  5. let para = document.getElementById("para");
  6. console.log(para.style.color);
  7. para.style.color = "magenta";
  8. </script>

一些样式属性名包含破折号,比如font-family。由于这些属性的命名不适合在 JavaScript 中使用(你必须写成style["font-family"]),因此在 JavaScript 中,样式对象中的属性名都移除了破折号,并将破折号之后的字母大写(style.fontFamily)。