VueUse 中文网

主题

useStyleTag ​

将活性 style 元素注入文档头。

¥Inject reactive style element in head.

示例 ​

源代码演练场

Edit CSS:

ID: vueuse_styletag_1

Loaded: false

用法 ​

¥Usage

基本用法 ​

¥Basic usage

提供一个 CSS 字符串，那么 useStyleTag 会自动生成一个 id 并将其注入到 <head> 中。

¥Provide a CSS string, then useStyleTag will automatically generate an id and inject it in <head>.

ts
import { 
useStyleTag
 } from '@vueuse/core'

const {
  
id
,
  
css
,
  
load
,
  
unload
,
  
isLoaded
,
} = 
useStyleTag
('.foo { margin-top: 32px; }')

// Later you can modify styles

css
.
value
 = '.foo { margin-top: 64px; }'

此代码将被注入到 <head>：

¥This code will be injected to <head>:

html
<style id="vueuse_styletag_1">
  .foo {
    margin-top: 64px;
  }
</style>

自定义 ID ​

¥Custom ID

如果你需要定义自己的 id，可以传递 id 作为第一个参数。

¥If you need to define your own id, you can pass id as first argument.

ts
useStyleTag
('.foo { margin-top: 32px; }', { 
id
: 'custom-id' })
html
<!-- injected to <head> -->
<style id="custom-id">
  .foo {
    margin-top: 32px;
  }
</style>

媒体查询 ​

¥Media query

你可以将媒体属性作为对象中的最后一个参数传递。

¥You can pass media attributes as last argument within object.

ts
useStyleTag
('.foo { margin-top: 32px; }', { 
media
: 'print' })
html
<!-- injected to <head> -->
<style id="vueuse_styletag_1" media="print">
  .foo {
    margin-top: 32px;
  }
</style>