一、style

利用 “[元素].style.[CSS属性名] = [属性值]” 的方法

1 var Box = document.getElementById('box')
2 Box.style.height = '100px'
3 Box.style.width = '100px'
4 Box.style.backgroundColor = "red"

显示效果如下

二、style.cssText

此方法很简洁,更像写行内样式

利用 [元素].style.cssText = 'CSS样式' 的方法

1 var Box = document.getElementById('box')
2
3 Box.style.cssText = 'height: 100px; width: 100px; background-color: darkblue;'

显示效果如下

js给元素设置样式的更多相关文章

  1. 【使用 DOM】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

  2. 【温故而知新-Javascript】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

  3. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  4. Windows Phone 为指定容器内的元素设置样式

    在Windows Phone中设置元素样式有多种 拿TextBlock来说 1.我们可以直接在控件上设置: <TextBlock Text="自身样式设置" Width=&q ...

  5. 通过js读取元素的样式

    /* * 通过元素.style.样式只能获取到内联样式的值,就是style写在元素里面的值,不能获取嵌入式和外联样式的值 * 所以如果要获取除内联样式后的值,就不能通过这个获取 * alert(box ...

  6. zepto中给不存在的元素设置样式并绑定事件的坑

    在移动端使用zepto选择器时,一般如果元素不存在会返回一个空的zepto对象. zepto在设置元素样式时,提供了两个入参方式,一种键值对方式$(".ter").css({&qu ...

  7. vue 给v-html中的元素设置样式

    解决方案:写样式的时候添加>>>

  8. js实现元素添加样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js给元素添加样式[addClass][hasClass]

    function addClass(el, className) { if (hasClass(el, className)) { return } let newClass = el.classNa ...

  10. js兼容获取元素的样式

    js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...

随机推荐

  1. 实验二 K-近邻算法及应用

    博客班级 https://edu.cnblogs.com/campus/ahgc/machinelearning 作业要求 https://edu.cnblogs.com/campus/ahgc/ma ...

  2. 转载:Windows Server查看W3SVC IIS服务器中对应的网站日志

    W3SVC日志文件夹中序号的含义,格式就是W3SVC+网站ID 如果没有自定义站点的日志路径,日志默认的路径是C:\inetpub\logs\LogFiles\ 基本上每个网站存放日志的文件夹名称都是 ...

  3. spring boot 常见问题

    什么是 Spring Boot? 简单来说,spring boot 底层就是:spring + spring mvc + tomcat + 其他框架 starter: spring boot 依靠 s ...

  4. Windows Oracle 启动OracleDBConsoleorcl 服务时报 Window不能在 本地计算机启动 OracleDBConsoleorcl 。有关更多信息,查阅系统事件日志。如果这是非Microsoft服务,请与服务厂商联系,并参考特定服务错误代码 2 。

    一.报错信息如图 二.原因分析: 计算机主机名或IP地址有变化 三.解决方法 依次输入命令: Microsoft Windows [版本 10.0.22000.795](c) Microsoft Co ...

  5. SSRF Server-Side Request Forgery(服务器端请求伪造)

    什么是SSRF? 犹如其名,SSRF(Server-Side Request Forgery)服务端请求伪造,攻击者可以控制服务器返回的页面,借用服务器的权限访问无权限的页面. 这是一个允许恶意用户导 ...

  6. 声网传输层协议 AUT 的总结与展望丨Dev for Dev 专栏

    本文为「Dev for Dev 专栏」系列内容,作者为声网大后端传输协议负责人 夏天. 针对实时互动应用对网络传输带来的新需求和新挑战,声网通过将实时互动中的应用层业务需求与传输策略的分层和解耦,于 ...

  7. 页面录制服务上线:RESTful API 调用实现,所见所录即所得

    我们为很多实时互动场景提供了服务.在一些场景中,用户不仅需要实时互动,还需要把互动的过程录下来.那么一个好的录制解决方案究竟需要具备哪些特征呢? 在回答这个问题之前,先聊一下客户使用录制的原因.一般来 ...

  8. MySQL高可用架构-MMM、MHA、MGR、分库分表

    总结 MMM是是Perl语言开发的用于管理MySQL主主同步架构的工具包.主要作用:管理MySQL的主主复制拓扑,在主服务器失效时,进行主备切换和故障转移. MMM缺点:故障切换可能会丢事务(主备使用 ...

  9. iOS 深色模式适配

    要求:iOS13.0以上 重点:需要所有界面进行适配,工作量巨大,需要从项目开始就进行适配:H5界面无法进行适配 实现方式:System Colors(常用).Semantic Colors(常用). ...

  10. 逍遥自在学C语言 | 逻辑运算符

    前言 一.人物简介 第一位闪亮登场,有请今后会一直教我们C语言的老师 -- 自在. 第二位上场的是和我们一起学习的小白程序猿 -- 逍遥. 二.构成和表示方式 逻辑运算符是用来比较和操作布尔值的运算符 ...