js给元素设置样式
一、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给元素设置样式的更多相关文章
- 【使用 DOM】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
- 【温故而知新-Javascript】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- Windows Phone 为指定容器内的元素设置样式
在Windows Phone中设置元素样式有多种 拿TextBlock来说 1.我们可以直接在控件上设置: <TextBlock Text="自身样式设置" Width=&q ...
- 通过js读取元素的样式
/* * 通过元素.style.样式只能获取到内联样式的值,就是style写在元素里面的值,不能获取嵌入式和外联样式的值 * 所以如果要获取除内联样式后的值,就不能通过这个获取 * alert(box ...
- zepto中给不存在的元素设置样式并绑定事件的坑
在移动端使用zepto选择器时,一般如果元素不存在会返回一个空的zepto对象. zepto在设置元素样式时,提供了两个入参方式,一种键值对方式$(".ter").css({&qu ...
- vue 给v-html中的元素设置样式
解决方案:写样式的时候添加>>>
- js实现元素添加样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js给元素添加样式[addClass][hasClass]
function addClass(el, className) { if (hasClass(el, className)) { return } let newClass = el.classNa ...
- js兼容获取元素的样式
js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...
随机推荐
- java注解和反射(Annotation and Reflect)
摘要: 注解和反射是相互联系的知识,所以应该放到一起来说. 注解:JDK5之后才有的技术,为了增加对元数据的支持,可以将注解理解为代码中的特殊标记,一种修饰.而这些标记是可以在代码编译,类的加载,和运 ...
- Float浮动、 CSS定位(position)
Float浮动. CSS定位(position)1.CSS定位机制(1)普通流(标准流)-默认状态,元素自动从左往右,从上往下的排列(2)浮动-会使元素向左或向右移动,只能左右,不能上下-浮动元素碰到 ...
- Ansys-CHEMKIN-pro表面反应机制输入(Surface Kinetics Input)规则
chemkin表面反应机制文件(Ansys-CHEMKIN-pro表面反应机制输入) 1. 文件包含表面活性位(相).表面组分,固相组分.固相,热力学数据,反应机制: 2. 顺序:物质名称,活性位数据 ...
- 转帖:弹性布局(display:flex;)属性详解
它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间.与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大 ...
- POI设置单元格下拉框
一.导出 Excel 单元格设置下拉框 日常开发中,导出基础数据为模版,填充信息后导入时,有时候会要求某些导入项应该为下拉框选择,一个是为了规范数据,也可以简化填充. 1.1 单元格下拉框选项总字符较 ...
- mfc edit只允许输入数字
1.给EDIT控件添加 EN_CHANGE 事件 2.事件中的代码如下: 1 CString strEditVidoe; 2 GetDlgItem( iId )->GetWindowText( ...
- sdut——4541:小志志和小峰峰的日常(取石子博弈模板题 4合1)
小志志和小峰峰的日常 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 小志志和小峰峰特别喜欢一起讨论一些很好玩的问题. ...
- 如何在 Apinto 实现 HTTP 与gRPC 的协议转换 (下)
上文给大家详细介绍了在 Apinto 上实现 HTTP 与 gRPC 的协议转换的基本内容,本篇我们将继续讲解如何在 Apinto-Dashboard 中进行配置. 配置 Apinto Apinto ...
- 64位的单周期 RISC-V 模拟器
分享一个我最近完成过的小项目--64位的单周期 RISC-V 模拟器,这个项目我最近参与一生一芯计划过程中完成的一个小项目. 需要用到的相关知识:Verilog.Verilator.计算机组成原理.汇 ...
- C/C++编译构建相关问题
名词辨析 GNU GNU's Not Unix!的递归缩写 一个自由的操作系统,起源于GNU计划,希望发展出一套完整的开放源代码操作系统来取代Unix 基本组成包括: GNU编译器套装(GCC) GN ...