仿写Vue中的:style属性

最新推荐文章于 2025-05-14 14:41:23 发布

小御姐@stella

最新推荐文章于 2025-05-14 14:41:23 发布

阅读量315

点赞数 8

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_54548545/article/details/139726386

版权

实现在html文件中，通过一下方式给元素添加style属性

<h3 :style="fn">新的一天，打工仔加油</h3>

1、定义好一个样式库(函数字典)

2、window全局注册一个函数(高阶函数),该函数的参数为cb（回调函数1）和val（参数2,给cb使用）

3、在cb回调函数中,进行相关处理

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
 
<body>
  <h3 :style="fn">新的一天，打工仔加油</h3>
  <script>
    // 获取:style绑定的值，对应就是methods对象中的key
    let h3Dom = document.querySelector('h3')
    let val = h3Dom.g