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:以前写的xmlhttp池,代码
May 18 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 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中获取时间的下一周下个月的方法
2014/03/18 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Python实现图片识别加翻译功能
2019/12/26 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
Python pip配置国内源的方法
2020/02/14 Python
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
工程现场管理求职自荐信
2013/10/02 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
体育教师求职信
2014/06/30 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
Oracle 多表查询基本语法实例
2022/04/18 Oracle
Java 死锁解决方案
2022/05/11 Java/Android