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学习笔记(六) Date 日期类型
Jun 19 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
服务器安全设置的几个注册表设置
2007/07/28 Javascript
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
Python常用随机数与随机字符串方法实例
2015/04/09 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
python 美化输出信息的实例
2018/10/15 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
python SocketServer源码深入解读
2019/09/17 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
Python基于内置函数type创建新类型
2020/10/22 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
事业单位人员的自我评价范文
2014/09/21 职场文书
出差报告范文
2014/11/06 职场文书