当前位置: 首页 > news >正文

js中怎么获取CSS属性值

obj.style:

这个方法只能获取写在style属性中的值,而无法获取定义在 <style type='text/css'>里面的属性

<style type=”text/css”> 
.ss{color:#cdcdcd;}  
</style>  
<div id=”css88″ class=”ss” style=”width:200px; height:200px; background:#333333″>JS获取CSS属性值
</div>  
<script type=”text/javascript”> 
alert(document.getElementById(“css88″).style.width);//200px 
alert(document.getElementById(“css88″).style.color);//空白 
</script> 
复制代码

obj.currentStyle与getComputerStyle

obj.currentStyle只有IE支持,而getComputerStyle在FireFox中支持,这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例如“;after”)。如果不需要伪元素信息,第二个参数可以为null。该方法返回一个CSSStyleDeclaration对象,其中包含当前元素的所有计算的样式。

<html> 
<head> 
<title>计算元素样式</title> 
<style> 
#myDiv { 
    width:100px; 
    height:200px; 
} 
</style> 
<body> 
<div id ="myDiv" style=" border:1px solid black"></div> 

<script> 
var myDiv = document.getElementById("myDiv"); 
var computedStyle = document.defaultView.getComputedStyle(myDiv, null); 

alert(computedStyle.backgroundColor); //"red" 
alert(computedStyle.width); //"100px" 
alert(computedStyle.height); //"200px" 
alert(computedStyle.border); //在某些浏览器中是“1px solid black” 
</script> 
</body> 
</head> 
</html></span>
复制代码

所以估计兼容浏览器,我们可以封装一个函数来获取一个元素的CSS属性值:

function getStyle(element, attr) {
        if(element.currentStyle) {
                return element.currentStyle[attr];
        } else {
                return getComputedStyle(element, false)[attr];
        }
}
复制代码

相关文章:

  • shell提取MySQL结果到变量中
  • 写GULP遇到的ES6问题详解
  • [leetcode] 3Sum
  • 实战CentOS-6.6安装流程
  • idea 使用
  • oracle 数据库相关名词--图解
  • Python服务器开发二:Python网络基础
  • Android Studio 使用本地gradle配置详解
  • CSS规范命名
  • Redis命令详解:Lists
  • 深度学习中的注意力机制
  • PV与并发之间换算的算法 换算公式
  • 序列化组件
  • 日常遇到的问题
  • 添加sudo免密码
  • bootstrap创建登录注册页面
  • CentOS6 编译安装 redis-3.2.3
  • Docker: 容器互访的三种方式
  • ES6系统学习----从Apollo Client看解构赋值
  • input实现文字超出省略号功能
  • Java 最常见的 200+ 面试题:面试必备
  • JavaScript 基本功--面试宝典
  • js写一个简单的选项卡
  • Python 反序列化安全问题(二)
  • vue 配置sass、scss全局变量
  • vuex 学习笔记 01
  • Vue组件定义
  • 彻底搞懂浏览器Event-loop
  • 计算机常识 - 收藏集 - 掘金
  • 设计模式 开闭原则
  • 什么软件可以提取视频中的音频制作成手机铃声
  • 为物联网而生:高性能时间序列数据库HiTSDB商业化首发!
  • 关于Kubernetes Dashboard漏洞CVE-2018-18264的修复公告
  • ​力扣解法汇总946-验证栈序列
  • #AngularJS#$sce.trustAsResourceUrl
  • %3cli%3e连接html页面,html+canvas实现屏幕截取
  • (07)Hive——窗口函数详解
  • (1)(1.13) SiK无线电高级配置(六)
  • (9)STL算法之逆转旋转
  • (done) ROC曲线 和 AUC值 分别是什么?
  • (Redis使用系列) Springboot 实现Redis 同数据源动态切换db 八
  • (安卓)跳转应用市场APP详情页的方式
  • (转)Google的Objective-C编码规范
  • (转)大型网站架构演变和知识体系
  • ../depcomp: line 571: exec: g++: not found
  • .net core 6 使用注解自动注入实例,无需构造注入 autowrite4net
  • .NET/C# 中设置当发生某个特定异常时进入断点(不借助 Visual Studio 的纯代码实现)
  • .net6解除文件上传限制。Multipart body length limit 16384 exceeded
  • .NET大文件上传知识整理
  • .NET微信公众号开发-2.0创建自定义菜单
  • .sh文件怎么运行_创建优化的Go镜像文件以及踩过的坑
  • /usr/lib/mysql/plugin权限_给数据库增加密码策略遇到的权限问题
  • ??javascript里的变量问题
  • []FET-430SIM508 研究日志 11.3.31
  • [51nod1610]路径计数