使用原生实现jquery中的css方法

由于jquery放在mobile页面上,有时候还是显得有点大,所以今天尝试使用原生来开发,但是习惯了jquery之后,转用原生开发之后,发现原生中,找不到可以替代jquery的css方法,于是对原生的HTMLElement做了一点小扩展,代码如下:

HTMLElement.prototype.css = function(styles) {
    for (style in styles) {
        this.style.setProperty(style, styles[style]);
    }
};

使用方法:

            vcenter.css({
                position: 'absolute',
                width: w * 100 + '%',
                height: h * 100 + '%',
                left: '50%',
                "margin-Left": '-' + (pvcenter.offsetWidth * 0.9) / 2 + 'px',
                top: '50%',
                "margin-Top": '-' + (pvcenter.offsetWidth * 0.9) / 2 + 'px'
            });
    
注意:由于css属性中有些属性名称包含了'-',这样的符号,在js中使用这样的符号定义变量名是不合法的,所以在设置这类型的css属性时,需要加上引号。
posted @ 2016-08-04 15:56  kevin.l  阅读(692)  评论(0)    收藏  举报