JavaScript如何获取一个元素的样式信息


Posted in Javascript onJuly 29, 2019

跨浏览器方法

function getStyle(elem, cssprop, cssprop2){
 if(elem.currentStyle){
  return elem.currentStyle[cssprop]
  }else if(document.defaultView && document.defaultView.getComputedStyle){
  return document.defaultView.getComputedStyle(elem, "").getPropertyValue(cssprop2)
 }else{
  return null
 }
}
<style> 
 #elem{font-size:23px;} 
</style> 
<input id ="elem" style="font-size:18px;"/> 
<script>
elem.style.fontSize = '12px'; 
console.log(getStyle(elem, "fontSize", "font-size")) 
// 输出12px 
</script>

getStyle取值的优先级是:

1.动态设置的

2.内联设置的

3.样式表设置的

4.浏览器默认设置的

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 内存释放问题
Apr 25 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
Vuex的actions属性的具体使用
Apr 14 Javascript
jQuery实现轮播图效果demo
Jan 11 jQuery
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
教你搭建按需加载的Vue组件库(小结)
Jul 29 #Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 #Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 #Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 #Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 #Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 #Javascript
javascript中this的用法实践分析
Jul 29 #Javascript
You might like
php类声明和php类使用方法示例分享
2014/03/29 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP模块化安装教程
2016/06/01 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
Python面向对象之Web静态服务器
2019/09/03 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
给交警的表扬信
2014/01/12 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书