原生模仿jQuery的addClass添加类名方法出错

原生模仿jQuery的addClass添加类名方法出错,第1张

你写的addClass是独立的函数,不是dom的方法,dom没有方法你调用肯定出错的,把addClass写成dom的方法即可

window.HTMLElement.prototype.addClass = function(clas){

    if (this.className.indexOf(clas) < 0) {//先判断,以防重复加同样的类名

        return this.className += "" + clas

    }

}

<button type="button" class="btn" onclick="location.href='tiaozhuan.html'">Click Me</button>

如下示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>Demo</title>

</head>

<style type="text/css">

a{text-decoration: none}

.class-name{border: 1px solid #CCCCCCbackground: #FFA54F-webkit-border-radius: 5px-moz-border-radius: 5pxkhtml-border-radius: 5pxborder-radius: 5pxpadding: 5px 10pxwidth: 100pxtext-align: center}

</style>

<body>

    <div id="main">

        <a href="javascript:" onclick="add_class()">添加Class</a>

    </div>

<script language="javascript" type="text/javascript">

    function add_class(){

        document.getElementById('main').className = 'class-name'

    }

</script>

</body>

</html>

测试效果如下:

添加class前

添加class后

与jQuery的addClass同一效果的。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11175234.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存