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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
javascript 面向对象继承
Nov 26 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
JavaScript ES6的函数拓展
Jan 18 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.MVC的模板标签系统(五)
2006/09/05 PHP
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
python构造IP报文实例
2020/05/05 Python
Python中and和or如何使用
2020/05/28 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
J2EE面试题大全
2016/08/06 面试题
仓库主管的岗位职责
2013/12/04 职场文书
科技工作者先进事迹
2014/08/16 职场文书
学雷锋感言
2015/08/03 职场文书
培训后的感想
2015/08/07 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫