HTML5的classList怎么应用

今天小编给大家分享一下HTML5的classList怎么应用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

成都创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的碾子山网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

Element.classList

这个属性已经发布了好几年,通过classList,我们可以通过JavaScript来操纵折叠css的类属性。

代码如下:

复制代码

代码如下:

// //使用classList属性(Dom元素,css类名)

function toggleClassList(element,cName){

// 1. classList API

//切换类,有则可删除,没有则添加

if(element.classList.toggle){

元素.classList.toggle(cName);

返回true;

}

// !!! 其实,本函数toggleClassList如果支持的话,

//那么下面的代码就不会被执行,此处唯一作演示,请灵活应用

// 2. classList API

//元素的类属性是否包含隐藏这个CSS类

var hasHide = element.classList.contains(cName);

// //

if(hasHide){

// 3. classList API

//可移除隐藏类

element.classList.remove(cName);

} else {

// 4. classList API

//添加隐藏类

element.classList.add(cName);

}

返回true;

};

文本菜单API

经测试chrome28不管用......

新的API,文本菜单是极好的接口:此接口允许你很简单地添加菜单项到浏览器的上下文菜单(右键菜单),而不是去覆盖浏览器的默认右键菜单。

需要注意的是,你最好采用js脚本来动态的创建上下文菜单,这样可以避免页面替换JS脚本的情况下出现多余的HTML代码。

代码如下:

复制代码

代码如下:

<! -文本菜单指定了使用哪个上下文菜单- >

<! - !不知道为什么,我的浏览器上这个配置不起作用- >

<节contextmenu =“ mymenu” style =“ min-height:100px; min-height:200px; background:#999;”>

点击此区域查看菜单

<!-

为了代码结构的清晰,把menu元素放到了要使用的元素内部,实际上你也可以放到外部的任何地方:

->

<!-添加菜单,至于图片图标,请自己设置。添加菜单->

Element.dataset

数据集(数据集)API允许开发者对DOM元素设置(集)和获取(获取)以data-开头开头的属性值。

代码如下:

复制代码

代码如下:

复制代码

代码如下:

函数testDataset(){

//

var intro = document.getElementById(“ intro”);

//注意这个不是id属性哦,是data-id的值

var id = intro.dataset.id;

//数据网站

var website = intro.dataset.website;

// data-blog-url,驼峰命名法..

var blogUrl = intro.dataset.blogUrl;

// data-my-name

var myName = intro.dataset.myName;

//

var msg =“ qq:” + id

+“,网站:” +网站

+“,blogUrl:” + blogUrl

+“,myName:” + myName

;

//

warn(msg);

};

没有什么好说的,和班级列表一样,简单却实用。(想一想,是否改变了后台和前台JS的某些交互以及解耦?)

window.postMessage API

IE8已经支持的postMessage API好几年了,此API允许window和iframe元素之间互相传递消息。

跨域支持哦。代码如下:

复制代码

代码如下:

//从域1上的窗口或框架发送消息到承载另一个域的iframe

var iframeWindow = document.getElementById(“ iframe”)。contentWindow;

iframeWindow.postMessage(“您好,第一个窗口!”);

//从不同主机上的iframe内部,接收消息

window.addEventListener(“ message”,function(event){

//确保我们信任发送域

if(event.origin ==“ http://davidwalsh.name” ){

//注销消息

console.log(event.data);

//发回一条消息

event.source.postMessage(“ Hello back!”);

}

]);

//消息只允许字符串类型的数据,而您可以使用JSON.stringify以及JSON.parse传递更多累积的消息。

autofocus属性

autofocus属性确保当页面加载后,给定的BUTTON,INPUT或者TEXTAREA元素能够自动获得焦点。

复制代码

代码如下: