• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > 网站建设 > 怎样通过JS来为网页元素添加CSS样式?

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

    作者: 分类:网站建设 点击: 7,511 次
    wordpress CMS主题:ssmay主题

      在开发网页时,有时不想通过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源文件里一样。



      QQ二维码

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.