js封装链式函数3层 可以点击修改样式
时间: 2024-01-04 12:02:26 浏览: 36
可以的,以下是一个简单的实现示例:
```javascript
var myObj = {
elem: null,
css: function(props) {
for (var prop in props) {
this.elem.style[prop] = props[prop];
}
return this;
},
click: function(handler) {
this.elem.addEventListener('click', handler);
return this;
},
init: function(elemId) {
this.elem = document.getElementById(elemId);
return this;
}
};
myObj.init('myDiv')
.css({ backgroundColor: 'red', color: 'white' })
.click(function() {
this.style.backgroundColor = 'blue';
});
```
在上面的示例中,我们定义了一个名为`myObj`的对象,该对象包含了三个方法:`css`、`click`和`init`。`init`方法用于初始化对象,从页面中获取一个元素对象,并将其保存在`myObj`对象中;`css`方法用于修改元素的CSS样式;`click`方法用于给元素绑定点击事件。
在实际使用时,我们可以通过链式调用这些方法,来达到简化代码的目的。例如,我们可以先调用`init`方法来获取页面中的元素对象,然后调用`css`方法来修改其样式,最后调用`click`方法来绑定点击事件。在这个过程中,每个方法都会返回`this`对象,以便我们可以继续调用其他方法。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)