jquery 添加请求头_根据jQuery请求添加和删除HTML类

最新推荐文章于 2023-01-23 08:21:32 发布

cune1359

最新推荐文章于 2023-01-23 08:21:32 发布

阅读量257

点赞数

文章标签： java javascript python js html ViewUI

轻松添加新HTML类；只需打开HTML文档，找到要添加的内容，插入并命名该类。但是，在构建允许访问者参与的交互式网站时，您可能需要根据要求修改，插入和删除HTML类。

您可以使用jQuery完成此操作。下面的示例函数将在<div>添加my-new-class并将其删除。

// ## add class
$('div').addClass('my-new-class');

// ## remove class
$('div').removeClass('my-new-class');

我们还可以使用标准JavaScript代码来添加/删除HTML类，如下所示：

// add class
document.getElementById('elem').className = 'my-new-class';

// remove class
document.getElementById('elem').className = document.getElementByTag('div').className.replace( /(?:^|\s)my-new-class(?!\S)/g , '' )

您在上面看到的代码不像使用JavaScript Framework jQuery时那样简单。但是，如果您不想依赖框架，则可以始终使用名为classList的新JavaScript API。

使用classList API

与jQuery相似， classList提供了一组允许我们修改HTML类的方法。

如果div具有多个类，我们可以使用classList检索div中分配的类。

var classes = document.getElementByID('elem').classList;
console.log(classes);

当打开浏览器控制台时，我们可以看到这些类的列表。

要添加和删除类，我们可以使用.add()和.remove() 。

var elem = document.getElementByID('elem');

// add class
elem.classList.add('my-new-class');

// remove class
elem.classList.remove('my-new-class');

添加多个类也可以通过用逗号分隔每个类来完成：

elem.classList.add('my-new-class', 'my-other-class');

要检查某些元素是否包含指定的类，我们可以使用.contains() 。如果存在指定的类，则返回true，否则返回false 。

elem.classList.contains('class-name');

我们还可以使用.toggle()切换类。以下代码段显示了如何将.toggle()方法与鼠标单击事件绑定。

var button = document.getElementById('button');
function toggle() {
	elem.classList.toggle('bg');
}
button.addEventListener('click', toggle, false);

从以下链接中查看实际的演示。

最终思想

classList是新的本机JavaScript API，也随HTML5一起引入。它简洁明了，可在以下浏览器中使用：Firefox 3.6，Opera 11.5和Chrome 8和Safari 5.1。但是，Internet Explorer 9及更低版本中不存在此功能，因此在Internet Explorer中实现classList API时可能必须使用Polyfills 。