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 相关文章推荐
Javascript中的this绑定介绍
Sep 22 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
JavaScript 函数的执行过程
May 09 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
Vue仿支付宝支付功能
May 25 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 Javascript
vue-router中hash模式与history模式的区别
Jun 23 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写的MySQL数据库用户认证系统代码
2007/03/22 PHP
PHP 中文处理技巧
2010/04/25 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
jquery 上下滚动广告
2009/06/17 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
最新pycharm安装教程
2020/11/18 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
参观监狱心得体会
2014/01/02 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
校运会广播稿
2015/08/19 职场文书
Python制作表白爱心合集
2022/01/22 Python