但我们经常会听到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
最后我们封装一个所有浏览器都能用的方法:
?外部样式表,引入一个外部css文件?内部样式表,将css代码放在 <head>标签内部
?内联样式,将css样式直接定义在 HTML 元素内部
对DOM设置它的CSS样式的话,建议到黑马程序员社区找到相关的教程,内涵详细的操作流程和教学,非常适合学习。我当初在找前端工作之前,就是刷的他们的面试题,里面原理都说的很清楚。适合学习
设置样式的话,就分为两种了,css或者js。一种是直接用css,结合css选择器进行设置当前元素的display属性为none值。
p{display:none}
#p1{display:none}
.p1{display:none}
还有一种是用js,一般js可以动态地改变dom元素的样式
比如这段代码obj.style.display="none"
这段代码就是将当前的obj的display属性改成了none值,也就是不显示该元素