封装一个函数获取和修改属性
最近在做一个前后端交互的项目，根据不同的需求获取页面不同元素的属性，根据属性修改不同的样式，虽然我们有获取属性和修改属性的方法，但是每次都要写一遍，学前端的同学应该深有体会吧，当页面元素过多时，挨个的去获取非常的麻烦，别急，众多方法中总有最简单的那一个。
用一个函数将其功能封装起来，
// obj是哪个对象 attr哪个属性
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr]
}
else {
return getComputedStyle(obj, false)[attr]
}
}
//获取属性或者设置属性
function getElementStyle(obj, attr, value) {
//获取css的数值
if (arguments.length == 2) {
return getStyle(obj, attr)
}
//设置css的数值
if (arguments.length === 3) {
obj.style[attr] = value + 'px'
}
}
测试：
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./jQuery.min.js"></script> <script src="./class.js"></script> <style> #div1 { width: 100px; height: 100px; background: red; } </style> </head> <body> <div id="div1"></div> </body> </html>
js
$(function () { // obj是哪个对象 attr哪个属性 function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr] } else { return getComputedStyle(obj, false)[attr] } } //获取属性或者设置属性 function getElementStyle(obj, attr, value) { //获取css的数值 if (arguments.length == 2) { return getStyle(obj, attr) } //设置css的数值 if (arguments.length === 3) { obj.style[attr] = value + 'px' } } //测试 var div = document.querySelector('#div1'); var result = getElementStyle(div, "width") //当调用函数时，只传递两个参数时，就是获取div的width值 console.log(result); //当调用函数时，只传递三个参数时，就是修改当前属性值 getElementStyle(div, 'width', 200) })
