wordpress CMS主题 微信
Home > 网站建设 > 怎样通过JS来为网页元素添加CSS样式?

怎样通过JS来为网页元素添加CSS样式?

高时银博客 网站建设 点击: 4,695 次 0 1
  • 标签:
  • 在开发网页时,有时不想通过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源文件里一样。


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201509084823.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论