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 相关文章推荐
JQuery 小练习(实例代码)
Aug 07 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
js charAt的使用示例
Feb 18 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
VUE项目axios请求头更改Content-Type操作
Jul 24 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设计模式 Observer(观察者模式)
2011/06/26 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
JS实现在线ps功能详解
2019/07/31 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
Python编程中装饰器的使用示例解析
2016/06/20 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
自我鉴定范文
2013/11/10 职场文书
个人自荐书
2013/12/20 职场文书
先进个人事迹材料
2014/01/25 职场文书
给校长的一封建议书
2014/03/12 职场文书
挂牌仪式主持词
2014/03/20 职场文书
学雷锋倡议书
2015/01/19 职场文书
体育部部长竞选稿
2015/11/21 职场文书
导游词之江南周庄
2019/12/06 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python