day31-33关于自定义属性和修改属性

这篇博客探讨了在JavaScript中如何使用DOM操作来修改元素的内建属性和创建自定义属性。通过示例,展示了直接使用点语法修改内建属性如`type`的便捷性,以及使用`setAttribute`方法创建和修改自定义属性如`zzzzz`的直观性。无论是否是内建属性,`setAttribute`都会确保属性在HTML标签中体现。
摘要由CSDN通过智能技术生成

以input标签为例子

input = document.querySelector("input");
input.type = "checkbox";//在DOM中,也在标签中。
input.hhhhhhh = "xxxxxx";//在DOM中,不在标签中,因为他不是内建属性。
input.setAttribute("zzzzz","checkbox");//不管是否是内建属性,都会出现在标签中。

所以,在修改内建属性时,为了方便,直接用点语法就行。
在创建和修改自定义属性时,用setAttribute,会更加直观。其实用点语法也可以,就是不直观。

自定义`el-date-picker`选择旬的组件通常是在Vue.js框架下利用Element UI库的基础上进行扩展的。`el-date-picker`原生支持日、周、月和年等选择范围,但是如果你需要添加旬(十天为一旬,中国传统的农历周期单位)的选择功能,你需要做以下几个步骤: 1. **覆盖默认选项**: 在`props`中新增一个属性,如`type`,定义可以选择的范围,例如`types: ['day', 'week', 'month', 'decade', 'sennight']`,其中`sennight`表示旬。 ```javascript <template> <el-date-picker :type="selectedType" placeholder="选择旬" ...其他原生属性... /> </template> <script> export default { props: { selectedType: { type: String, default: 'day', validator: value => ['day', 'week', 'month', 'decade', 'sennight'].includes(value), }, }, ...其他组件逻辑... } </script> ``` 2. **自定义展示和选择**: 需要在日期显示和用户交互的部分处理旬的选择逻辑。这可能包括计算当前日期属于哪个月的第几个旬,以及更新日期选择时如何同步旬。 ```javascript methods: { handlePick(date) { if (this.selectedType === 'sennight') { // 根据日期计算并设置旬 this.currentSennight = ... // 这里需要你自己实现旬的计算 } ...其他日期操作... }, } ``` 3. **样式定制**: 如果想要自定义外观,可以修改` scopedStyle ` 或者通过CSS覆盖默认样式。 为了实现这个功能,你需要对Vue.js和Element UI有深入理解,并且能够编写相应的事件处理器和计算逻辑。同时,由于这不是Element UI的官方特性,可能需要自行维护这部分代码的兼容性和稳定性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值