理解DOM如何操作CSS样式

html-css018

理解DOM如何操作CSS样式,第1张

我们知道DOM部分其实就是浏览器各大厂商提供的一些列方法和属性的集合,这一系列的属性和方法也被称为接口,这些接口可以让我们更加方便的操作HTML和XML,注意我没有说CSS哦

但我们经常会听到js操作css或者脚本化css的说法,那是怎么回事呢?

其实,DOM中提供的方法能操作HTML的所有内容,其中包括能操作元素的属性,而元素的属性中又恰好包含style属性,style属性表示的是该元素行间样式,而且行间样式的权重是1000。所以一般我们通过DOM操作元素的属性style就间接的改变了该元素的CSS样式。

DOM操作CSS样式其实质是通过DOM控制行间样式,从而达到改变样式的效果。这只能说间接的操作CSS,并非真实的直接操作CSS文件

通过DOM元素的style读写CSS行间样式

格式:ele.style.prop

注:

1. 可读可写行间样式,没有兼容性问题

2. 碰到保留字属性,前面应添加css;例如:float-->cssFloat

3. 复合属性必须拆解

4. 组合单词变成小驼峰式

5. 写入的值必须是字符串格式

用法比较简单,我们深入看看style吧

先随便来两个元素,并选中

我们发现,dom元素的原型的原型都是HTMLElement。于是猜测,style就是定义在HTMLElement的原型链上,所以凡是DOM元素都有style属性。

通过hasOwnProperty进一步验证看看是否就在HTMLElment的原型上

明白style定义在哪里之后,再来看style里面是什么?

目前也只有这种方式能修改CSS样式。

下面再来了解查询样式的方式:

window.getComputedStyle(ele,null)

IE使用另外一直方式代替

ele.currentStyle

最后我们封装一个所有浏览器都能用的方法:

其实这是我在某次面试前端实习生时候遇到的一个问题,面试官说你有多少种让DOM隐藏的方法,能说多少说多少,当时脑抽,因为是“能说多少说多少”就觉得那肯定有好多,总结一下当时想出来的“偏方”。

两者不同:如果设置 display:none,将隐藏整个元素,如果设置 visibility:hidden,元素的内容将不可见,但元素仍保持原来的位置和大小。

思来想去既然是隐藏,我是不是还可以说 opacity:0,问了一下这个答案行不行,他说行,还有吗?

当然有:

设置position为position:absolute或fixed,可以通过z-index遮掩。

设置父元素为 overflow:hidden ,将想要隐藏的元素移出父元素范围。

通过css的clip属性,将DOM裁剪。

通过css的transform属性

a. transform: skew(90deg) 拉伸90度,当然不一定是90

b. transform: scale(0) 缩放到0

c. transform: rotateX(90deg) 当然角度不一定是90,也不一定是沿x轴

=。=面试完之后我就去群里边问了一下,大部分人说的答案都是 display: none和 visibility: hidden斗胆猜测一下这两个应该是面试官想要的答案。

虽然答案可能就这两个,但是我还是有用到过我的“偏方”去做隐藏元素,

我遇到的情况是,我需要为DOM元素做一个fadeout+fadein的动画,元素带有click事件,fadeout之后只是opacity为0,然后就有了 元素隐藏了之后点击事件还存在 这个bug。

当然解决方案有很多,可以通过js,也可以通过css,css可以通过延时+transform来做,也算是我的偏方吧,可能解决方案并不完美,望留言指教。

当然这只是一些自己瞎琢磨出来的方法,希望有和我一样爱闹腾的同学补充一下下,也希望大神见到后不吝指教,感激不尽。

xml一般是用于网页传输数据的,dtd说白了就是一个模板,用于规定xml或者html的标签类型,css用于控制html的外观,xsl其实就是css用于xml的一个实现,其派生xslt可以用于转换xml到html,dso不知道,dom是是一种文档结构模型,基于树和节点