一、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. HOOK大法

    // 请求头hook 测试网站同花顺 OK var header_old = window.XMLHttpRequest.prototype.setRequestHeader;window.XMLHt ...

  2. 关于 用鼠标移动拖放 TabControl 标签 操作 实现 类

    1.相关说明已有 2.本类有可以改进的地方,如更进,希望交流 3.对多行标签的支持没做特别解决,效果不太好 4.初学者使用,即可通过其构造函数直接加载需要赋予此拖放功能的 TabControl 即可实 ...

  3. Rstudio R get filename full path

    FILENAME=basename(rstudioapi::getActiveDocumentContext()$path) FULLPATH=dirname(rstudioapi::getActiv ...

  4. protobuf怎么处理java中的Object和Object[],protobuf的bytestring和object[]

    如题,作者一开始也遇到了这个比较棘手的问题. 话不多说,直接说解决方案. 这里使用bytestring,如果是object[]的话则用repeated定义即可. 那么问题又来了,用这个类型怎么做到与j ...

  5. java中的4种引用和GC Roots

    https://juejin.im/post/5d06de9d51882559ee6f4212?utm_source=gold_browser_extension 1.首先,四种引用如下: Final ...

  6. 01-什么是ElasticSearch

    1.什么是搜索? 百度:我们想要查找想要的一些信息比如在百度搜索一本书,一部电影这就是最常见的搜索 但是百度!=搜索 垂直搜索(站内搜索) 互联网的搜索:电商网站,新闻网站,招聘网站,等等 IT系统的 ...

  7. OSPF RFC 1583 兼容

  8. ffmpeg的常用参数

    -encoders 查看支持的编码器 Intel处理器的核心显卡支持的编码器带有qsv后缀(Intel quick sync video acceleration)        NVIDIA独立显卡 ...

  9. docker基本操作 备忘

    docker 基本操作 通过镜像运行容器 - docker run -d -it -p 5555:5555 镜像名 启动容器,并将进入容器中的bash命令行 进入容器 - docker attach ...

  10. EL表达式 总结

    EL表达式,全称是Expression Language.意为表达式语言.它是Servlet规范中的一部分,是JSP2.0规范加入的内容.其作用是用于在JSP页面中获取数据,从而让我们的JSP脱离ja ...