这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战
前言
今天我们来谈一谈H5的css扩展，大家也知道H5覆盖的范围及其广泛，今天就css来讲一讲吧。
CSS 类扩展
自HTML4被广泛采用以来, Web 开发中一个主要的变化是 class 属性用得越来越多,其用处是为元素添加样式以及语义信息。自然地, JavaScript 与 CSS 类的交互就增多了,包括动态修改类名,以及根据给定的一个或一组类名查询元素,等等。为了适应开发者和他们对 class 属性的认可,HTML5增加了一些特性以方便使用 CSS 类。 getElement ByClassName (), getElementsByClassName ()是HTML5新增的最受欢迎的一个方法,暴露在 document 对象和所有 HTML 元素上。这个方法脱胎于基于原有 DOM 特性实现该功能的 JavaScript 库,提供了性能高好的原生实现。
getElementsByClassName ()方法接收一个参数,即包含一个或多个类名的字符串,返回类名中
包含相应类的元素的 NodeList 。如果提供了多个类名,则顺序无关紧要。下面是几个示例:
//取得所有类名中包含" username "和" current "元素//这两个类名的顺序无关紧要\
1etal1CurrentUsernames= document . getElementsByClassName (＂ username current ＂);//取得 ID 为" my Div "的元素子树中所有包含" selected "类的元素\
let selected = document . getElementBy Id (" myDiv "). getElementsByClassName (" selected ");
这个方法只会返回以调用它的对象为根元素的子树中所有匹配的元素。在 document 上调用 getElementsByClassName ()返回文档中所有匹配的元素,而在特定元素上调用 getElement sBy - ClassName ()则返回该元素后代中匹配的元素。
如果要给包含特定类(而不是特定 ID 或标签)的元素添加事件处理程序,使用这个方法会很方便。不过要记住,因为返回值是 NodeList ,所以使用这个万法会遇到跟使用 getElementsByTagName()。
22:36:50
HTML5通过给所有元素增加 classList 属性为这些操作提供了更简单也更安全的实现方式。 classList 是一个新的集合类型 DOMTokenList 的实例。与其他 DOM 集合类型一样, DOMTokenList 也有 length 属性表示自己包含多少项,也可以通过 item ()或中括号取得个别的元素。此外, DOMTokenList 还增加了以下方法。
- add ( value ),向类名列表中添加指定的字符串值 value 。如果这个值已经存在,则什么也不做。
- contains ( value ),返回布尔值,表示给定的 value 是否存在。
- remove ( value ),从类名列表中删除指定的字符串值 value 。
- toggle ( value ),如果类名列表中已经存在指定的 value ,则删除;如果不存在,则添加。
这样以来,前面的例子中那么多行代码就可以简化成下面的一行:
div . classList . remove (" user "); 微等照
这行代码可以在不影响其他类名的情况下完成删除。其他方法同样极大地简化了操作类名的复杂
性,如下面的例子所示:
/删除＂ disabled ＂类
div . classList . remove (＂ disabled ＂);
//添加" current ＂类
div . classList , add (＂ current ＂);
/切换" user "类
div . classList . toggle (" user ＂);
//迭代类名
for ( let class of div . classList ){ doStuff ( class );
添加了 classList 属性之后,除非是完全删除或完全重写元素的 class 属性,否则 className 属性就用不到了。IE10及以上版本(部分)和其他主流浏览器(完全)实现了 classList 属性。
