用于改变类的现代HTML5技术|三体教程
文章目录

用于改变类的现代HTML5技术

浏览器版本经常更新换代,现在最新版的已经添加了classList,它提供的一些方法,使得我们在不需要库的情况下操作类变得更加的容易。

document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');

但是,也有一些遗憾,那就是在IE10之前的版本并不支付。

简单的跨浏览器解决方案

选择一个元素的标准方法,我们一般是使用javascript的document.getElementById("Id")

当然也可以使用其他方法来获取元素,在正常的情况下还可以简单的使用this。

更改元素的所有类:

要用一个或多个新类替换所有现有类,请设置className属性:

document.getElementById("MyElement").className="MyClass";

可以使用空格分隔来应用多个类(class1 class2)。

为一个元素添加一个额外的类:

要添加一个类到一个元素,而不删除/影响现有的值,追加一个空格和新的类名,如下所示:

document.getElementById("MyElement").className+=" MyClass";

从元素中移除一个类:

要从某个元素中移动某个类,而不影响其他潜在的类,则需要一个简单的正则表达式替换:

document.getElementById("MyElement").className=document.getElementById("MyElement").className.replace(/(?:^|s)MyClass(?!S)/g,'')
/* Code wrapped for readability - above is all one statement */

这个正则表达式的解释如下:

(?:^|s) # 匹配字符串的开始,或者一个空格字符

MyClass  # 为className删除文本

(?!S)   # 为了验证上述反向预测是整个类名
         # 确保没有空格字符跟随
         # (i.e.必须是字符串的结尾或空格)

该g标志告诉替换重复根据需要,以防万一班级名称已被添加多次。

要检查一个类是否已经应用到一个元素:

上面用于移除类的正则表达式也可以用来检查某个特定的类是否存在:

if(document.getElementById("MyElement").className.match(/(?:^|s)MyClass(?!S)/))

将这些操作分配给onclick事件:

虽然可以直接在HTML事件属性(如onclick="this.className+=' MyClass'")中编写JavaScript,但我们不建议这样。

特别是在较大的应用程序中,通过将HTML标记与JavaScript交互逻辑分开,可实现更多可维护的代码。

实现这一目标的第一步是创建一个函数,并在onclick属性中调用该函数,例如:

<script type="text/javascript">
    function changeClass()
    {
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

不需要在脚本标记中包含此代码,这仅仅是为了简化示例,并且将JavaScript包含在不同的文件中可能更合适。

第二步是将onclick事件从HTML中移出并转换成JavaScript,例如使用addEventListener

<script type="text/javascript">
    function changeClass()
    {
        // Code examples from above
    }

    window.onload = function()
    {
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

请注意,window.onload这部分是必需的,以便在HTML加载完成后执行该函数的内容,否则,在JavaScript代码被调用时MyElement可能不存在,从而导致该行失败。

JavaScript框架和库

上面的代码都是标准的JavaScript,但是通常的做法是使用框架或者库来简化常见的任务,以及从编写代码时可能不会想到的固定的错误和边缘情况中受益。

虽然有些人认为增加一个大约50KB的框架来简单地改变一个类,可能并不划算。

但是如果你正在做大量的JavaScript工作,或者任何可能具有不寻常的跨浏览器行为的东西,那么使用框架是值得考虑的。

非常粗略的说,一个库是一套为特定任务设计的工具,而一个框架通常包含多个库并执行一套完整的职责。

上面的例子使用jQuery(可能是最常用的JavaScript库)进行了重新编译(尽管还有其他值得研究的地方)。

请注意,$这里是jQuery对象。

用jQuery改变类:

$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )

另外,jQuery提供了一个快捷方式来添加一个类,或者删除一个类:

$('#MyElement').toggleClass('MyClass');

用jQuery为一个点击事件分配一个函数:

$('#MyElement').click(changeClass);

或者,不需要ID:

$(':button:contains(My Button)').click(changeClass);

希望以上的内容能够给正在学习javascript或jquery的小伙伴们有所帮助。

本文网址:http://www.santii.com/article/184.html


数据更新时间:2018-07-22