js setProrperty和setAttribute解析

今天深入学习h() 发现 它的第二个参数 和 setAttribute有些相似,所以写了这篇文章

MDN解释

MDN中setAttribute解释

Element 接口的 setAttribute() 方法用于设置指定元素上的某个属性值。如果属性已经存在,则更新该值;否则,使用指定的名称和值添加一个新的属性

js 复制代码
html:```
<button>你好,世界</button>
```
const button = document.querySelector("button");
// 设置属性
button.setAttribute("name", "helloButton");
button.setAttribute("disabled", "");

MDN中setProrprity解释

setProrprity方法接口为一个声明了 CSS 样式的对象设置一个新的值

js 复制代码
const declaration = document.style;
declaration.setProperty("margin", "1px 2px");
// 相当于:
// declaration.margin = '1px 2px';
方法 个人总结
setAttribute 设置属性 如:个人自定义属性、HTML属性(不推荐)
setProrperty 设置css样式(包括css变量 如:--y)

vue h()的第二个参数 与 setAttribute 相似之处

简单讲解一下 h() 创建vue虚拟节点

个人总结

h()的第二个参数和setProrperty类似地方是可以给对应的节点设置属性,但h()的第二个参数是个对象,对象值可以不是字符串,更方便优雅。

js 复制代码
    // setProrperty 设置点击事件和字体大小
    element.setAttribute('onClick', '(()=> { console.log("hello div") })()');//点击事件
    element.setAttribute('style', 'font-size:30px;'); // 字体大小

    //  h()第二个参数 设置点击事件和字体大小
  <component
   :is="h('div', {onclick: ()=> { console.log('hello h()') } ,style: { 'fontSize': '30px' },},'点击')">
  </component>

Ai总结

  1. 共同点
  • 都用于设置元素的属性和事件
  • 都可以处理标准 HTML 属性
  1. 主要区别
  • 语法结构

    • setAttribute 每次只能设置一个属性
    • h() 可以通过对象一次性设置多个属性
  1. 使用场景
  • setAttribute: 用于直接 DOM 操作
  • h(): 用于虚拟 DOM 的创建和渲染
相关推荐
IT_陈寒17 分钟前
Python 3.12 新特性实战:5个让你的代码效率提升50%的技巧!🔥
前端·人工智能·后端
Apifox19 分钟前
Apifox 8 月更新|新增测试用例、支持自定义请求示例代码、提升导入/导出 OpenAPI/Swagger 数据的兼容性
前端·后端·测试
coding随想27 分钟前
最后的挽留:深入浅出HTML5 beforeunload事件
前端
亚里士多德芙39 分钟前
记录:离线包实现桥接
前端
去伪存真1 小时前
用的好好的vue.config.js代理,突然报308, 怎么回事?🤔
前端
搞个锤子哟1 小时前
el-select使用filter-method实现自定义过滤
前端
flyliu1 小时前
什么是单点登录,如何实现
前端
码力无边_OEC1 小时前
第四章:幕后英雄 —— Background Scripts (Service Worker)
前端
阿黎啊啊啊1 小时前
避免 node_modules 修改被覆盖:用 patch-package 轻松搞定
前端
纯JS甘特图_MZGantt1 小时前
五分钟集成一个高颜值甘特图?这个国产开源库让你告别繁琐!
前端