js怎样控制CSS
HTML网页中可以通过js来控制标签的属性,那么应该怎样做呢?今天我就来给大家分析分析一下具体的思路。
操作方法
- 01
这里我就以div标签为例进行说明,首先,我们在网页中书写三个div标签。
- 02
然后通过CSS来设置div的属性,这里我就使用width和height来设置div的宽高,都是40像素,然后设置div的背景颜色为红色。 然后使用margin-top来让div拉开一定的间距,margin-left让div距离浏览器左边100像素,哈哈,这样做只是为了大家更清楚看到控制效果而已,作用不是很大。
- 03
然后来看看效果,可以看到三个div的颜色样式等。
- 04
可以看到整个网页中有三个div,接着我们使用document.getElementsByTagName来获取到div这个标签。 document.getElementsByTagName返回的是一个数组,里面包含了三个div,然后我们通过数组下标来控制标签的属性,比如我要控制第一个div标签的宽度,就可以用a[0].style.width="150px";而剩下的两个分别是控制颜色和高度。
- 05
接着我们预览一下控制后的效果,可以看到第一个div宽度改变了,而第二个div颜色变成蓝色,最后一个div高度也变化了。
- 06
当然也可以通过id的方式来控制修改标签的属性,比如我们要控制第二个标签,就在第二个div里面添加id=””,引号里面就是id的名称,可以自己取一个。 这里我就把id名称设置为“two”。
- 07
然后我们再重新在script里面使用document.getElementById来获取第二个div的id,这样,就可以通过id来控制标签属性了。
- 08
再来看看使用document.getElementById后的效果。
赞 (0)