Element.matches()
如果元素包含指定的选择器字符串,存在返回true,
不存在则返回false
目前在非标准名称 matchesSelector()
实现了这个方法,并且不同浏览器使用前需要前缀。
- el.matchesSelector( DOMElement element, String selector )
1 | <div class="main"></div> |
为了方便兼容IE8+既低版本的浏览器使用,可以重写matchesSelector方法
1 | if (!Element.prototype.matchesSelector) { |
需要注意的是:如果指定的选择器是数字开头的则会报错,如
class=”1mian”,id=”1main”
参考文献:https://www.lyblog.net/detail/601.html ,
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/matches
getComputedStyle和currentStyle
element.style 获取的是内联样式或设置样式 , 如果获取指定的属性名 style中
不存在则返回空
element.currentStyle 这是ie专有的属性,只在ie下支持,在获取未设置的属性
值时,currentStyle会读取浏览器的默认值
document.defaultView.getComputedStyle(element,null) ie6~ie8是不支持的,
获取属性和currentStyle类似
1 | <div style="height:100px"></div> |
CSS 实现水平垂直居中
1 | <div class="wrapper"> |
1.position+auto
1 | .wrapper{ |
这个居中方案比较简单常用,IE8及以上支持
但是有一点需要注意:宽度和高度不能是auto,否则高宽会继承 限制他的元素(relative);下一个方案解决这问题:
2. table-cell
1 | .wrapper{ |
这个方案可以解决上一个需要设置高宽的问题,IE8及以上支持。这里除了给父父元素一个vertical-align: middle;之外,我们还需要给需要水平垂直居中的元素也添加vertical-align: middle;属性。如果不添加,那么在垂直方向上会有几个像素的误差。
3.position+margin/absolute/translate
1 | // 形式一 |
前两个都差不多,需要自己计算数值并且需要设置宽高,IE5及以上支持推荐使用第三个方案,利用translate按自身的高宽百分比移动,达到居中效果,IE9及以上支持
4.Flex
1 | .wrapper{ |
不需要设置元素高宽,且简单,就可以达到居中效果,但是….IE10及以上才支持。移动端兼容良好,推荐在移动端使用
5.Flex+margin
1 | .wrapper{ |
兼容性:IE10及以上 ,这种方法跟第4种方法比较起来代码也更加简洁。
6.fixed+top+transform
1 | .demo { |
网上终极法
1 | .demo-wrap{height: 200px; |
参考:https://juejin.im/post/58f818bbb123db006233ab2a
https://segmentfault.com/a/1190000011942746?_ea=2818653