input一些少为人知的属性用法
封面图
•
2025-11-22
•
Html/Css
216
0
0
0
以下是一些**少为人知的属性用法**,主要涉及HTML、CSS和JavaScript中一些不常被提及但非常有用的功能。这些属性可以提升开发效率或实现一些特殊效果。 --- ## 🧩 一、HTML 中的隐藏属性用法 ### 1. `hidden` 属性 - **用途**:控制元素是否显示(与 `display: none` 类似) - **示例**: ```html <div hidden>这个元素默认不可见</div> ``` - **注意**:虽然与 `style="display: none"` 效果类似,但 `hidden` 是一个布尔属性,不需要值,直接写 `hidden` 即可。 --- ### 2. `autofocus` 属性 - **用途**:页面加载后自动聚焦到某个输入框 - **示例**: ```html <input type="text" autofocus> ``` --- ### 3. `contenteditable` 属性 - **用途**:使元素内容可编辑(无需 JavaScript) - **示例**: ```html <div contenteditable="true">我可以被编辑</div> ``` --- ## 🎨 二、CSS 中的冷门属性用法 ### 1. `mask` 和 `clip-path` - **用途**:创建复杂的形状遮罩,比 `clip` 更强大。 - **示例**: ```css .shape { width: 100px; height: 100px; background: red; clip-path: polygon(50% 0%, 100% 30%, 70% 100%, 30% 100%, 0% 30%); } ``` --- ### 2. `backdrop-filter` - **用途**:对背景进行滤镜处理(如模糊、颜色调整) - **示例**: ```css .modal { backdrop-filter: blur(5px); background: rgba(255, 255, 255, 0.5); } ``` --- ### 3. `isolation` - **用途**:控制元素的层叠上下文,防止子元素溢出 - **示例**: ```css .container { isolation: isolate; } ``` --- ## 💻 三、JavaScript 中的冷门 API 或属性 ### 1. `Object.defineProperty()` 的 `get` 和 `set` - **用途**:定义对象属性时添加访问器函数 - **示例**: ```javascript let obj = {}; Object.defineProperty(obj, 'name', { get() { return this._name; }, set(value) { this._name = value.toUpperCase(); } }); obj.name = 'john'; console.log(obj.name); // "JOHN" ``` --- ### 2. `window.performance.now()` - **用途**:获取高精度时间戳(比 `Date.now()` 更准确) - **示例**: ```javascript const start = performance.now(); // 执行一些操作 const end = performance.now(); console.log(`耗时 ${end - start} 毫秒`); ``` --- ### 3. `navigator.userAgentData` - **用途**:获取浏览器和设备信息(更安全的方式替代 `navigator.userAgent`) - **示例**: ```javascript if (navigator.userAgentData) { console.log(navigator.userAgentData.platform); console.log(navigator.userAgentData.brands); } ``` --- ## 🔍 四、其他语言中的冷门属性(如 Python) ### 1. `__slots__`(Python) - **用途**:优化类的内存使用,限制实例只能有指定的属性 - **示例**: ```python class Point: __slots__ = ['x', 'y'] def __init__(self, x, y): self.x = x self.y = y ``` --- ### 2. `__dict__`(Python) - **用途**:查看对象的属性字典(用于调试或反射) - **示例**: ```python class MyClass: def __init__(self): self.a = 1 obj = MyClass() print(obj.__dict__) # {'a': 1} ``` --- ## ✅ 总结 | 技术 | 冷门属性 | 功能 | |------|----------|------| | HTML | `hidden`, `autofocus`, `contenteditable` | 控制可见性、自动聚焦、内容可编辑 | | CSS | `mask`, `clip-path`, `backdrop-filter`, `isolation` | 复杂形状、背景滤镜、层叠控制 | | JS | `Object.defineProperty`, `performance.now`, `navigator.userAgentData` | 属性访问器、高精度计时、用户代理数据 | | Python | `__slots__`, `__dict__` | 内存优化、属性查看 | --- 如果你有特定语言或框架(如 React、Vue、TypeScript 等)想了解其冷门属性用法,也可以告诉我,我可以继续补充!
上一篇:
情绪定律
下一篇:
chr码值对应列表大全
标题录入,一次不能超过6条
留言
评论