- 加入我的QQ群
- 关注我的百家号
扫描下面的二维码,“关注”我的百家号。
在开发网页时,有时不想通过CSS源文件来添加网页元素的CSS样式代码,这时,我们可以通过JS来添加这些元素的CSS样式。那么怎样通过JS来为网页元素添加CSS样式呢?
下面举一个简单案例:<div id="box"></div> 我们要为这个id为 box 的div添加样式。我们要为它添加宽度、高度、背景色。
方法一:
var head= document.getElementById("box"); //获取到id为box的div标签元素。
head.style.width = "70px"; //设置宽度为70
head.style.height = "70px";//设置高度为70
head.style.display = "#ccc";//设置背景色为灰色
这种方法比较简单,但是,如果CSS样式很多的话,如还有margin、padding、font-size等,这时,我们还这样写的话,那会一大堆。这时,我们可以用方法二。
方法二:
var head= document.getElementById("box");//获取到id为box的div标签元素。
head.style.cssText="width:70px;height:70px;display:#ccc";
这种方法中,我们用到了“ cssText”,这样我们就大大地减少了代码。就像写CSS源文件里一样。