input一些少为人知的属性用法

封面图 • 2025-11-22 • Html/Css

以下是一些**少为人知的属性用法**，主要涉及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 等）想了解其冷门属性用法，也可以告诉我，我可以继续补充！