一、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. win10自带录屏为什么录两个小时自动关闭?如何调节使其可以时间更长?

    Windows设置->游戏->屏幕截图->录制时间: https://www.zhihu.com/question/404390297

  2. 第3章---数据探索(python数据挖掘)

    1.缺失值分析及箱型图 数据:catering_sale.xls(餐饮日销额数) 缺失值使用函数:describe()函数,能算出数据集的八个统计量 import pandas as pd cater ...

  3. keshe

    keshe 发送方a 代码: package org.example; import cn.hutool.core.util.CharsetUtil; import cn.hutool.core.ut ...

  4. LeetCode86 分隔链表

    idea: 烦死了,这个题一直因为创立的指针为空,或者接入结点方法不对,结果将两个小链表搞混乱了,不过具体思路ok.将小值结点成一组,大值结点成一组,最后在首尾相连,实现起来也比较简单 /**  *  ...

  5. GDB使用详解

    来源:GDB使用详解 - 知乎 (zhihu.com) 1. 概述 ​ GDB 全称"GNU symbolic debugger",从名称上不难看出,它诞生于 GNU 计划(同时诞 ...

  6. 接口自动化之request几种常见请求及响应方法

    request 的几种常见方法 1.request.get() 发送get请求 2.request.post() 发送post请求 3.request.delete() 发送delete请求 4.re ...

  7. python安装第三方库出现“'pip' is not recognized ...”报错及其解决

    命令行安装第三方库,直接 通过命令 pip install XXX 会报错: 'pip' is not recognized as an internal or external command, o ...

  8. Centos7 禁用IPV6地址的方法

    方法 1 编辑文件/etc/sysctl.conf, vi /etc/sysctl.conf 添加下面的行: net.ipv6.conf.all.disable_ipv6 =1 net.ipv6.co ...

  9. Android笔记--视图显示

    视图显示 视图的宽高设置 方式一:在.xml文件中设置视图的宽和高 通过调用android:layout_width设置视图的宽 通过调用android:layout_height设置视图的高 宽和高 ...

  10. 实践Pytorch中的模型剪枝方法

    摘要:所谓模型剪枝,其实是一种从神经网络中移除"不必要"权重或偏差的模型压缩技术. 本文分享自华为云社区<模型压缩-pytorch 中的模型剪枝方法实践>,作者:嵌入式 ...