js怎么添加css样式?

在开发网页时,有时不想通过CSS源文件来添加网页元素的CSS样式代码,这时,我们可以通过JS来添加这些元素的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源文件里一样。

方法三:使用setProperty

element.style.setProperty('height', '300px', 'important');

如果要设置!important,推荐用这种方法设置第三个参数

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是js怎么添加css样式?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏