Javascript 笔记与总结(2-9)获取运行时的 style 对象
2023-09-11 14:17:03 时间
获取内存中(正在渲染)的 style 的值(非内联 style,obj.style 只能获得内联 style 的值),可以用 obj.currentStyle(低版本 IE 和 Opera 支持)和 window.getComputedStyle(IE9 以及 标准浏览器支持)来获取。
window.getComputedStyle 的格式是 window.getComputedStyle(obj,伪元素)
第一个参数是要要获取计算后的样式的目标元素
第二个参数是期望的伪元素,如"after","first-letter"等,一般为 null
可以封装获取运行时的 style 对象的函数
function getStyle(obj, attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, null)[attr]; }
注:这两个方法获取的对象是只读的,要改样式必须使用 obj.style。
【例】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{ width: 300px; height: 300px; background: blue; border-bottom: 1px solid black; } </style> </head> <body> <div id="div1" onclick="t();"></div> </body> <script> function getStyle(obj, attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, null)[attr]; } function t(){ var div = document.getElementById("div1"); div.style.width = parseInt(getStyle(div, "width")) + 5 + 'px'; div.style.height = parseInt(getStyle(div, "height")) + 5 + 'px'; div.style.borderBottomWidth = parseInt(getStyle(div, "borderBottomWidth")) + 1 + 'px'; } </script> </html>
相关文章
- 【学习笔记04】JavaScript数据类型
- 【学习笔记21】JavaScript数组的基本方法
- 【学习笔记25】JavaScript字符串的基本认识
- 【学习笔记29】JavaScript数据类型之间的面试题
- 【学习笔记31】JavaScript冒泡排序和选择排序
- 【学习笔记58】JavaScript面向对象
- 【学习笔记67】JavaScript中的闭包
- javascript高级程序设计阅读笔记(一)
- 【JavaScript】XMLHttpRequest Level2使用指南
- 【JavaScript】javascript常用的东西
- Javascript 笔记与总结(2-7)对象
- 《21天学通HTML+CSS+JavaScript Web开发(第7版)》——2.2 为发布到Web准备好计算机
- Dynamic CRM 2013学习笔记(十一)利用Javascript实现子表合计(汇总,求和)功能
- JavaScript事件冒泡简介及应用
- JavaScript高级程序设计学习笔记--BOM
- JavaScript高级程序设计学习笔记--面向对象程序设计
- JavaScript高级程序设计学习笔记--变量、作用域和内存问题