封装获取非行内样式函数

获取非行内样式操作

1、 window.getComputedStyle(dom元素).属性
注意：在IE中，只有在ie9及以上才能获取
写法： var style = window.getComputedStyle(dom元素).height;

2、dom元素.currentStyle.属性
注意：只有在ie8及以下才能获取样式，在其他浏览器会报错
写法：var style = dom元素.currentStyle.height

    // 获取非行内的样式// getComputedStyle(dom元素).属性 只有在ie9及以上才能获取// var style = window.getComputedStyle(box).height;// 只有在ie8及以下才能获取样式，在其他浏览器会报错// var style = box.currentStyle.height

说明

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {height: 500px;}</style>
</head><body><div style="width:200px"></div><ul id="list"></ul><script>var box = document.querySelector('div');var styW = box.style.width;var styH = box.style.height;// box.style 只能获取 行内样式// console.log(styW);// console.log(styH);// 获取非行内的样式// getComputedStyle(dom元素).属性 只有在ie9及以上才能获取// var style = window.getComputedStyle(box).height;// 只有在ie8及以下才能获取样式，在其他浏览器会报错// var style = box.currentStyle.height// 获取样式的兼容写法var style;//先判断 if条件在ie8浏览器中 没有 window.getComputedStyle(box) 会报错// if (window.getComputedStyle(box)) {//     style = window.getComputedStyle(box).height;// } else {//     console.log(1);//     style = box.currentStyle.height;// }// console.log(box.currentStyle);// box.currentStyle 在高版本的浏览 不会报错，返回一个undefined// 写兼容获取样式的时候 直接使用  box.currentStyle// if (box.currentStyle) {//     style = box.currentStyle.height;// } else {//     style = window.getComputedStyle(box).height;// }// console.log(style);// 封装一个函数 来获取非行内样式function getStyle(ele, attr) {var style;if (ele.currentStyle) {//  ele.currentStyle 包含 所有css样式的对象// obj.attr 获取 obj的 attr的属性style = ele.currentStyle[attr];} else {style = window.getComputedStyle(ele)[attr];}console.log(style);}getStyle(box, 'width')</script>
</body></html>

封装一个函数来获取非行内样式

// 封装一个函数 来获取非行内样式
function getStyle(ele, attr) {var style;if (ele.currentStyle) {//  ele.currentStyle 包含 所有css样式的对象// obj.attr 获取 obj的 attr的属性style = ele.currentStyle[attr];} else {style = window.getComputedStyle(ele)[attr];}// 把获取的样式返回return style
}

测试封装函数（不同浏览器下）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background: red;color: blue;font-size: 20px;}</style>
</head><body><div class="box"></div><script>var box = document.querySelector('.box');var res = getStyle(box, 'background-color');console.log(res);  //rgb(255, 0, 0)function getStyle(ele, attr) {var style;if (ele.currentStyle) {//  ele.currentStyle 包含 所有css样式的对象// obj.attr 获取 obj的 attr的属性style = ele.currentStyle[attr];} else {style = window.getComputedStyle(ele)[attr];}// 把获取的样式返回return style}</script>
</body></html>

封装获取非行内样式函数相关推荐

JS一起学05：Date对象、封闭空间、函数传参和封装、获取非行间样式、字符串操作
一.Date对象 1. 获取 oDate.getFullYear() 获取年份 oDate.getMonth()+1 获取月份 0-11----->1-12 oDate.getDate() 获 ...
JS(函数返回值、获取非行间样式、函数封装、函数复用、定时器)
// 函数返回值 // 什么时候需要用:函数外想要使用内部的数据的时候 // 语法: return 返回值 // 1.返回回函数里的值 function fun1 (){ var a = 1; ret ...
非行间样式函数封装代码复用定时器
1.获取行间样式标签.style.样式名如果样式名是-链接使用驼峰命名例如font-size fontSize ==标签.style.样式名只能获取行间样式== 2.获取非行间样式和行间样式 ...
js获取行内以及非行内样式
如何取到非行内样式属性的属性值 //现代浏览器 getComputedStyle(domobj,null)[attr]; //低版本的一些浏览器 domobj.currentStyle[attr]; ...
javascript-数据类型,json与数组,获取非行间样式
一.javascript组成: 1.ECMAScript 解释器 2.DOM (文档对象模型:document object model) document 3.BOM(浏览器对象模型:brow ...
[js]写一个获取非行间样式的方法
[js]写一个获取非行间样式的方法 window.getComputedStyle()?window.getComputedStyle(element).attribute:element.curre ...
vue.js -- 获取dom元素的样式(非行内样式)
在vue中获取dom元素的样式: this.$refs.menuList.style.top; 这种获取方式是只能获取到元素的行内样式的. this.$refs.menuList.getBoundin ...
js获取非行间样式--有bug，忧伤
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
JS中的DOM操作属性、DOM创建、DOM增加、DOM修改、DOM删除以及DOM获取非行间样式
当网页被加载时,浏览器会创建页面的文档对象模型DOM(Document Object Model),在DOM中,每个东西都是节点. DOM四大操作:查找.更新.添加.删除通过DOM,JavaScri ...
获取非行间样式的获取
当我们的样式写在行间的时候,JS可以通过style获取, 然而style也只能获取或操作行间样式,当我们需要获取非行间的样式时, 应该采用什么方法呢? 首先定义一个div并为他设置样式: <st ...

封装获取非行内样式函数

获取非行内样式操作

说明

封装一个函数来获取非行内样式

测试封装函数（不同浏览器下）

封装获取非行内样式函数相关推荐

最新文章

热门文章

封装获取非行内样式函数

获取非行内样式操作

说明

封装一个函数 来获取非行内样式

测试封装函数（不同浏览器下）

封装获取非行内样式函数相关推荐

最新文章

热门文章

封装一个函数来获取非行内样式