2024-10-17发表2024-10-17更新12 分钟读完 (大约1748个字)

行内样式表与内部样式表

行内样式表与内部样式表的相同点与不同点

相同点：

作用范围：两者都可以应用于 HTML 元素，并用于定义页面的样式。
优先级：行内样式表与内部样式表都具有较高的优先级，行内样式优先级高于内部样式表。
CSS 规则相同：无论是行内样式还是内部样式，都遵循相同的 CSS 语法。

不同点：

定义方式：
- 行内样式表：直接在 HTML 元素的 style 属性中定义样式。
- 内部样式表：在页面的 <style> 标签中定义样式，通常位于 <head> 部分，针对某个或多个 HTML 元素。
适用范围：
- 行内样式表：仅适用于单个 HTML 元素。
- 内部样式表：可以应用于多个 HTML 元素，具有更广的作用范围。
维护性：
- 行内样式表：不适合大规模应用，维护困难，样式分散在多个 HTML 标签中。
- 内部样式表：集中管理样式，更容易维护，但不如外部样式表高效。

在 JavaScript 中获取与修改样式

1. 行内样式表

行内样式可以通过元素的 style 属性直接获取或修改。

获取行内样式：

如果元素存在行内样式，直接通过 element.style 获取其值。

<div id="box" style="color: red; background-color: blue;"></div>

<script>
  const box = document.getElementById('box');

  // 获取行内样式
  const color = box.style.color;
  console.log(color); // 输出: "red"
</script>

注意：只能获取通过 style 属性定义的行内样式，而无法获取由外部样式表或内部样式表定义的样式。

修改行内样式：

可以直接通过 element.style.property 来修改行内样式。

<div id="box" style="color: red; background-color: blue;"></div>

<script>
  const box = document.getElementById('box');

  // 修改行内样式
  box.style.color = 'green'; // 修改文本颜色
  box.style.backgroundColor = 'yellow'; // 修改背景颜色
</script>

2. 内部样式表

内部样式表的样式无法直接通过 element.style 获取，因为它们是通过 class 或元素选择器来应用的。需要使用 getComputedStyle 来获取计算后的样式。

获取内部样式：

使用 getComputedStyle 获取应用到元素上的所有样式，包括外部样式表和内部样式表定义的样式。

<style>
  #box {
    color: red;
    background-color: blue;
  }
</style>

<div id="box"></div>

<script>
  const box = document.getElementById('box');

  // 获取计算后的样式
  const computedStyle = getComputedStyle(box);
  console.log(computedStyle.color); // 输出: "red"
  console.log(computedStyle.backgroundColor); // 输出: "blue"
</script>

修改内部样式：

无法直接修改通过内部样式表定义的样式，但可以通过修改行内样式覆盖内部样式表的设置。

<style>
  #box {
    color: red;
    background-color: blue;
  }
</style>

<div id="box"></div>

<script>
  const box = document.getElementById('box');

  // 通过修改行内样式覆盖内部样式表的样式
  box.style.color = 'green';
  box.style.backgroundColor = 'yellow';
</script>

总结

行内样式可以直接通过 element.style 获取或修改，但只能作用于单个元素，优先级高。
内部样式表需要通过 getComputedStyle 获取，修改时通常使用行内样式覆盖其效果，适用范围更广。

为什么xx.style.setProperty的方式可以修改定义在内部样式表中的css变量

element.style.setProperty 可以修改 CSS 变量，即使这些变量是通过内部样式表或外部样式表定义的，原因在于 CSS 变量的特殊性质 和 行内样式的优先级。具体来说，CSS 变量在不同的层级中都可以被重新定义，并且行内样式具有比内部样式表更高的优先级。

1. CSS 变量的继承性和层次性

CSS 变量是一种特殊的机制，允许你在不同层次（全局、组件级别或局部）定义变量，并且可以在文档树的不同层级进行覆盖或重写。例如：

在全局 :root 定义的 CSS 变量可以被整个文档继承。
某个元素的样式表中重新定义的 CSS 变量会覆盖全局变量。
行内样式表（通过 JavaScript 的 style.setProperty）可以进一步覆盖任何样式表中定义的变量。

由于这种层次性，任何地方定义的 CSS 变量都可以被重新赋值，而行内样式作为直接应用于元素的最高优先级的样式，可以有效覆盖其他样式表中的定义。

2. 行内样式的优先级高于内部样式表

CSS 样式的优先级遵循 层叠规则（Cascading）。行内样式表的优先级最高，因此通过 element.style.setProperty 设置的样式会覆盖通过内部样式表或外部样式表定义的样式。即使内部样式表中已经定义了 CSS 变量，通过行内样式重写的变量仍然具有更高的优先级。

3. `setProperty` 的机制

setProperty 是 style 对象的一个方法，专门用来修改或设置 CSS 属性（包括 CSS 变量）。当你使用 element.style.setProperty 时，实际上是在修改该元素的 行内样式，这意味着它在层叠顺序中优先于其他样式表的定义。通过 setProperty 设置的值会被立即应用并覆盖之前的样式。

示例：通过 JavaScript 修改内部样式表中定义的 CSS 变量

假设你有一个通过内部样式表定义的 CSS 变量：

<style>
  :root {
    --main-color: blue;
  }

  .box {
    background-color: var(--main-color);
    width: 100px;
    height: 100px;
  }
</style>

<div class="box"></div>

通过内部样式表，--main-color 被定义为 blue。我们可以使用 JavaScript 来覆盖这个变量：

// 获取根元素
const root = document.documentElement;

// 修改 CSS 变量 --main-color 的值
root.style.setProperty('--main-color', 'red');

关键点：

root.style.setProperty 会在元素的行内样式上添加 --main-color: red，从而覆盖内部样式表中的定义。
由于行内样式的优先级高于内部样式表，因此修改后的 CSS 变量会生效，页面上显示的颜色变为红色。

4. 修改 CSS 变量的兼容性

通过 style.setProperty 修改 CSS 变量的方式非常灵活，适用于动态更新应用样式的场景，比如根据用户的交互改变主题颜色。由于这种修改是发生在元素的行内样式中，浏览器会立即应用变更，而无需刷新或重新渲染整个页面。

总结：

element.style.setProperty 能够修改内部样式表中定义的 CSS 变量，是因为：

CSS 变量的层次性允许你在文档的不同层次（如全局、局部、行内）重定义变量。
行内样式优先级最高，使得通过 setProperty 设置的 CSS 变量可以覆盖内部或外部样式表中的定义。

行内样式表与内部样式表

http://example.com/2024/10/17/行内与样式表/

作者

John Doe

发布于

2024-10-17

更新于

2024-10-17

许可协议

You need to set install_url to use ShareThis. Please set it in _config.yml.

行内样式表与内部样式表