[笔记]New in Chrome 66

原文

CSS Typed Object Model

使用CSS object model，返回的一切都是字符串

el.style.opacity = 0.3;
console.log(typeof el.style.opacity);
> 'string' // A string!?

现在可以使用.attributeStyleMap属性替代.styleMap来访问style。它返回一个类似map的对象，使得读写更加容易。

el.attributeStyleMap.set('opacity', 0.3);
const oType = typeof el.attributeStyleMap.get('opacity').value;
console.log(oType);
> 'number' // Yay!  返回了正确的数据类型了

而且性能也有所提升

el.attributeStyleMap.set('opacity', 0.3);
el.attributeStyleMap.has('opacity'); // true
el.attributeStyleMap.delete('opacity');
el.attributeStyleMap.clear(); // remove all styles

Async Clipboard API

const successful = document.execCommand('copy');

使用document.execCommand同步的复制 & 粘贴小段的文本问题不大，但是如果文本比较大，那么就有可能阻塞页面了。

66提供了新的异步的复制 api。

调用writeText()将文本复制到粘贴板中。

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

因为这个API是异步的， writeText()返回一个Promise。

同样的，可以使用getText()来读取粘贴板里面的文本，等到它返回一个Promise，然后resolve文本。

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

其他

• TextArea和Select现在支持autocomplete属性。
• 在form元素中设置autocapitalize会自动应用到它所有的子表单元素。
• trimStart()和trimEnd()用来去除字符串前后两端的空白。