一、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. matlab/simulink中的执行顺序问题

    关于在simulink中开发一些硬件环境模型,有时候会碰到一些模块的执行先后顺序问题.比如说在一个通过UDP发送指令命令给客户端,要求发送的指令有先后的时间顺序,只有在前一条命令发送完以后,才可以进行 ...

  2. react 收集表单数据 react-hook-form

    import React from 'react' import ReactDOM from 'react-dom' import { useForm } from 'react-hook-form' ...

  3. Javascript 事件派发 dispatcher

    基本使用 基础事件 let event = new Event("click") //新建click事件 node.addEventListener("click&quo ...

  4. 记录Nginx配置

    1 # Proxy to the Airsonic server location / { proxy_set_header X-Real-IP $remote_addr; proxy_set_hea ...

  5. vs2019远程调试win7系统的程序

    vs2019远程调试   一.安装vs2019远程调试工具 首先让调试的电脑(也就是不安装vs2019的电脑),安装vs2019远程调试工具:VS_RemoteTools.exe. 网址:进行下载.h ...

  6. 【Python】validator进行数据校验

    https://pypi.org/project/validator.py/ 校验参数必要性 from validator import Required, In, InstanceOf, Lengt ...

  7. SQLServer游标(Cursor)简单例子

    DECLARE @username nvarchar(50),@password nvarchar(50),@num int--声明游标变量 DECLARE myCursor CURSOR FOR s ...

  8. 6. 基础查(会员信息) - 创建查询Web Api - 配置Table Permission

    ​ Power Portal中的Web API可以对门户页面中所有的Microsoft Dataverse实体进行创建.更新和删除操作.我们可以直接使用门户Web API对产品创建新客户.更新联系人或 ...

  9. spring-mvc.xml

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  10. python os模块总结-目录、文件操作工具

    os (operating system)是python标准库中的操作系统接口,提供了很多与操作系统进行交互的函数,可快速对目录.文件进行操作. 下面我将在C:\Users\Administrator ...