js行内样式和类名样式的区别

行内样式和类名样式是两种不同的方式来设置元素的样式。

1. 行内样式：行内样式是直接在HTML标签的"style"属性中定义样式。例如：

<p style="color: blue; font-size: 16px;">这是一个行内样式的段落</p>

行内样式的优点是简单快捷，可以直接在标签上设置样式，不需要额外的CSS文件或类名。但缺点是当多个元素需要应用相同样式时，需要重复设置相同的行内样式，增加了代码冗余，并且难以维护和修改。

2. 类名样式：类名样式是通过CSS文件或`<style>`标签中定义的类选择器来设置元素的样式。例如：

<style>
  .blue-text {
    color: blue;
    font-size: 16px;
  }
</style>

<p class="blue-text">这是一个类名样式的段落</p>

类名样式的优点是可以将相同样式应用于多个元素，通过添加或修改类名即可实现样式的统一管理和修改。而且可以通过CSS选择器选择多个元素，更加灵活。缺点是需要额外的CSS文件或`<style>`标签来定义类名样式。

总的来说，行内样式适用于一些简单的、只在特定元素上应用的样式设置，而类名样式适用于复杂的、需要复用和管理的样式设置。