JS获取和修改元素样式的实例代码


Posted in Javascript onAugust 06, 2016

1、获取元素样式:

可以通过元素的style属性,获取元素行内样式。style属性是一个对象,包括一系列样式属性。例如:color, backgourdColor。

上面讲的通过style属性获取元素样式,不推荐使用。

下面的一段代码,可以获取元素运行时的样式,即全局的样式。这种方式可以动态获取元素的样式,例如元素大小。

// node:将要获取其计算样式的元素节点
// attr: 样式属性名称
function getCurrentStyle(node, attr) {
  var style = null;
  //dom标准方式
  if(window.getComputedStyle) {
    style = window.getComputedStyle(node, null);
  }
  else{
    style = node.currentStyle; //ie方式
  }
  
  return style[attr];
}

2、修改元素样式

直接通过元素的style属性,例如: p.style.backgroundColor = "red"

注意:当通过上面方法获取或修改元素样式时,属性名称和定义的元素属性名称有区别。例如:通过css的background-color定义背景色,那么在js中获取或修改这个样式属性时需要将‘-' 符号后的首字母转换成大小。

以上这篇JS获取和修改元素样式的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
怎么用javascript进行拖拽
Jul 20 Javascript
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
JavaScript入门教程 Cookies
Jan 31 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
微信小程序 video组件详解
Oct 25 Javascript
JS中判断null的方法分析
Nov 21 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
原生js获取元素样式的简单方法
Aug 06 #Javascript
浅析Node.js实现HTTP文件下载
Aug 05 #Javascript
JS中对Cookie的操作详解
Aug 05 #Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 #Javascript
js实现精确到毫秒的倒计时效果
Aug 05 #Javascript
jQuery实现Select左右复制移动内容
Aug 05 #Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 #Javascript
You might like
PHP生成便于打印的网页
2006/10/09 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
python中list常用操作实例详解
2015/06/03 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
详解python中asyncio模块
2018/03/03 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
Linux操作面试题
2015/02/11 面试题
自我鉴定书面格式
2014/01/13 职场文书
小学毕业感言500字
2014/02/28 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
安全技术说明书
2014/05/09 职场文书
校园活动策划方案
2014/06/13 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
2014年老干部工作总结
2014/11/21 职场文书
与死神共舞观后感
2015/06/15 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
Django中session进行权限管理的使用
2021/07/09 Python
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL