一、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. ubuntu16.04+win10双系统安装

    先下载Ubuntu到电脑:http://mirrors.ustc.edu.cn/ubuntu-releases/16.04.6/ubuntu-16.04.6-desktop-amd64.iso 准备个 ...

  2. Android工程接入UnityLibrary工程

    目录结构 Unity工程指UnityLibrary目录下文件: 安卓工程指app目录下文件: 整体指App目录下不包括app和UnityLibrary: 1.Unity打包时勾选导出安卓工程: 拷贝g ...

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

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

  4. 文件上传 upload-labs Pass-18 条件竞争

    Pass-18 条件竞争 审计源码 $is_upload = false; $msg = null; if(isset($_POST['submit'])){ $ext_arr = array('jp ...

  5. Python学习笔记--高阶技巧(二)

    Socket服务端开发 基本步骤如下: socket客户端开发 基本步骤如下: 1.创建socket对象 2.连接到服务器 3.发送消息 4.接收返回消息 5.关闭连接 正则表达式 基础方法 matc ...

  6. 对使用网站模板编写自己的jsp页面的收获

    收获与问题 先感叹一句模板的强大,模板只要按照我的上一篇博客的步骤进行修改,我们就能拥有一个自己写好看许多的界面了. 我目前套用模板还不是很熟练,套用的速度还需要加快,不过目前的我,已经掌握了基本要领 ...

  7. BOW/DOM(上)

    BOM 原生对象:成为js中的内置对象,就是由 js 中的构造函数创建的对象就被称为原生对象:Object.Number.Array.Date.String.... 宿主对象:web运行环境,也就是w ...

  8. 使用ELRepo升级CentOS内核

    在腾讯云中部署了一些服务器,操作系统使用的是CentOS 7.6,但是其默认内核版本较低,现使用ELRepo对CentOS的内核进行升级. 操作环境 服务器:腾讯云轻量应用服务器 操作系统:CentO ...

  9. Django笔记一之运行系统、创建视图并访问

    从这一篇笔记开始将根据 Django 的官方文档,阅读整理之后,出一系列笔记教程,用作新手入门教程或者自己做查阅. 此次 Django 的版本为 3.2,且之后的一系列笔记都将以这个版本为基础,做功能 ...

  10. 主板芯片组驱动和Win系统版本互相关联

    主板芯片组驱动和Win系统版本互相关联,过早的系统安装较新版的芯片组驱动,或者较新版本的操作系统安装旧版的芯片组驱动,都可能导致系统不稳定蓝屏.解决方案就是安装最新的芯片组驱动和最新版的操作系统.