首页前端开发JavaScriptjavascript怎么增加样式

javascript怎么增加样式

时间2024-01-30 00:03:03发布访客分类JavaScript浏览797
导读:收集整理的这篇文章主要介绍了javascript怎么增加样式,觉得挺不错的,现在分享给大家,也给大家做个参考。javascript增加样式的方法:1、通过“document.getElementById("box" ;”方式;2、通过“he...
收集整理的这篇文章主要介绍了javascript怎么增加样式,觉得挺不错的,现在分享给大家,也给大家做个参考。

javascript增加样式的方法:1、通过“document.getElementById("box"); ”方式;2、通过“head.style.cssText="..."”方法;3、使用setPRoPErty方法。

本文操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

javascript怎么增加样式?

js添加css样式

下面举一个简单案例:div id="box"> /div> 我们要为这个id为 box 的div添加样式。我们要为它添加宽度、高度、背景色。

方法一:

VAR head= document.getElementById("box");
     //获取到id为box的div标签元素。head.style.width = "70px";
     //设置宽度为70head.style.height = "70px";
    //设置高度为70head.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,推荐用这种方法设置第三个参数

推荐学习:《javascript高级教程》

以上就是javascript怎么增加样式的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

上一篇: javascript怎么实现二维码下一篇:javascript中怎么求偶数和猜你在找的JavaScript相关文章 html font标签如何设置字体大小?html font标签属性用法介绍2022-05-16vue3+TypeScript+vue-router的使用方法2022-04-16vue3获取当前路由地址2022-04-16如何利用React实现图片识别App2022-04-16JavaScript展开运算符和剩余运算符的区别详解2022-04-16微信小程序中使用vant框架的具体步骤2022-04-16Vue elementUI表单嵌套表格并对每行进行校验详解2022-04-16如何利用Typescript封装本地存储2022-04-16微信小程序中wxs文件的一些妙用分享2022-04-16JavaScript的Set数据结构详解2022-04-16 其他相关热搜词更多phpjavapython程序员loadpost-format-gallery

若转载请注明出处: javascript怎么增加样式
本文地址: https://pptw.com/jishu/591775.html
JavaScript怎么实现购物车结算 聊聊TypeScript中Enum(枚举)的用法

游客 回复需填写必要信息