JS的DOM操作——style的操作
window对象为我们提供了一个方法——getComputedStyle(当前元素节点),返回css样式对象,里面包含了我们在css里面设置的属性的属性值。可以看到这个对象里面包含的属性有很多,并且能够看到我们设置的background-color的属性值,rgb(255,0,0)就是红色。我只能说没有办法,但是能够获取到css里面属性的值,想要操作属性还是只能用获取的元素点(·)style.xx
对于JS操作文档中的元素,改变其的样式特征需要用到一个属性——style
常见操作:获取的元素点(·)style.xx(需要设置或修改的属性)
代码演示:例如修改div块的背景颜色
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div class="box">
我是box盒子
</div>
<script>
var box=document.querySelector(".box")
box.style.backgroundColor="green"
</script>
运行结果:
可以看到box盒子的背景色是绿色,并不是css样式设置的红色,即通过style修改了背景色。
注意:这里修改背景色,并不是修改了CSS中的background-color的属性值,而是在行内(标签内)进行了设置,因为行内设置属性的权重最大所以覆盖了css中设置的背景色。
通过调试器就可以看到:(F12快捷打开调试器)
因此在使用style时需要注意以下几点:
获取的元素点(·)style.xx(需要设置或修改的属性 ,只能操作行内样式;
属性值只能设置为字符串;
属性必须用驼峰命名法 ,例如style.background-color就是错误的,
正确写法:style.backgroundColor;
遇到与保留字一样的样式,前面应加“css”,例如float——>element.style.cssFloat。
那我们想操作css里面的属性该怎么呢?
我只能说没有办法,但是能够获取到css里面属性的值,想要操作属性还是只能用 获取的元素点(·)style.xx(需要设置或修改的属性)
那我们想要获取css里面的属性我们又应该怎么办呢?
window对象为我们提供了一个方法——getComputedStyle(当前元素节点),返回css样式对象,里面包含了我们在css里面设置的属性的属性值。
代码演示:我们获取一下这个对象,打印到控制台看一下
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div class="box">
我是box盒子
</div>
<script>
var box=document.querySelector(".box")
var cssobj=window.getComputedStyle(box)
console.log(cssobj);
</script>
控制台打印结果:
可以看到这个对象里面包含的属性有很多,并且能够看到我们设置的background-color的属性值,rgb(255,0,0)就是红色。
既然如此,我们就可以通过这个对象点需要的属性,就可以得到对应设置的属性值:
改进代码:
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div class="box">
我是box盒子
</div>
<script>
var box=document.querySelector(".box")
var cssobj=window.getComputedStyle(box)
console.log(cssobj.width,cssobj.height,cssobj.backgroundColor);
</script>
控制台打印结果:
这个window的方法,经常用于网页中模块拖动的效果的实现。
补充一点:window.getComputedStyle()不适应于IE浏览器,IE浏览器有一个它独有的方法获取css内的属性对象:element.currentStyle
更多推荐
所有评论(0)