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 - HTML的request类
Jan 09 Javascript
javascript实现 在光标处插入指定内容
May 25 Javascript
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
jquery的live使用注意事项
Feb 18 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 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
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
php操作redis缓存方法分享
2015/06/03 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
PHP创建XML接口示例
2019/07/04 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
python求众数问题实例
2014/09/26 Python
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
Python处理文本换行符实例代码
2018/02/03 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
详解Django的CSRF认证实现
2018/10/09 Python
python实现查找所有程序的安装信息
2020/02/18 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
党员批评与自我批评发言稿
2014/10/14 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书