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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
教你搭建按需加载的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
Memcache 在PHP中的使用技巧
2010/02/08 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
javascript 避免闭包引发的问题
2009/03/17 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
python获取中文字符串长度的方法
2018/11/14 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
python生成随机红包的实例写法
2019/09/02 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
计算机专业毕业生推荐信
2013/11/25 职场文书
学习新党章思想汇报
2014/01/09 职场文书
纪念建党演讲稿范文
2014/01/13 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android