HTML的16个全局属性
2015-12-10 10:49
549 查看
目录
[1]accesskey [2]class [3]dir [4]id [5]lang[6]style [7]tabindex [8]title [9]contenteditable [10]contentmenu [11]data-* [12]draggable [13]dropzone [14]hidden [15]spellcheck [16]translate
值:一个键盘字符如 O
范围:支持该属性的元素有<a>、<area>、<button>、<input>、<label>、<legend>、<textarea>
注意:使用该属性可能在新窗口打开链接时可能会被浏览器屏蔽
值:多个类名用空格分隔
注意:类名不能以数字开头
值:ltr/rtl/auto
注意:若浏览器中出现多个id名的情况,CSS样式对所以该id名的元素都生效,但js脚本仅对第一个出现该id名的元素生效
值:en英文/zn中文
值:<number>(1是第一个)
值:true/false
注意:设置document.designMode ='on'时,页面的任意位置都可以编辑;使用contenteditable ='true'则只对具体元素和其包含的元素起作用
移动端:移动端ios5以及android3之后才支持该属性
<演示框>选中文字后,点击下列相应属性值可进行演示
值:<menu>元素中唯一ID
注意:属性名不应包含任何大写字母,且在前缀"data-"之后必须有至少一个字符;属性值可以是任意字符串
使用:可以在所有浏览器中使用getAttribute方法来获取data-*属性的值,也可以使用javascript中dataset属性访问data-*属性的值,不过IE10-浏览器不支持dataset
值:true/false/auto
注意:链接和图像默认是可拖动的
值:copy拷贝/move移动/link指向原始数据链接
值:true/false
范围:可编辑区域(表单或contenteditable元素)
值:true/false
注意:移动端支持不好
值:yes/no
// var all = document.getElementById('cnblogs_post_body').children;
var select = [];
for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d/)){
select.push(all[i]);
}
}
}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+1])
}
}else{
change(oCon.children[select.length])
}
}
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
var oCon = document.getElementById("content");
for(var i = 1; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}
}
oCon.children[i].onclick = function(){
change(this);
}
}
function change(_this){
for(var i = 1; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>
[1]accesskey [2]class [3]dir [4]id [5]lang[6]style [7]tabindex [8]title [9]contenteditable [10]contentmenu [11]data-* [12]draggable [13]dropzone [14]hidden [15]spellcheck [16]translate
前面的话
在HTML中,属性能表达相当丰富的语义,而且属性也会额外提供很多实用的功能,HTML共支持16个常见的全局属性。HTML原有属性
accesskey
作用:浏览器用来创建激活或聚焦元素的快捷键值:一个键盘字符如 O
范围:支持该属性的元素有<a>、<area>、<button>、<input>、<label>、<legend>、<textarea>
注意:使用该属性可能在新窗口打开链接时可能会被浏览器屏蔽
<div> <a href="http://www.baidu.com" accesskey="b">百度</a> <a href="http://www.taobao.com" accesskey="a">阿里</a> <a href="http://www.qq.com" accesskey="t">腾讯</a> <p>快捷键(alt+b)可以跳转到百度;快捷键(alt+a)可以跳转到阿里;快捷键(alt+t)可以跳转到腾讯</p> </div>
class
作用:规定元素的一个或多个类名值:多个类名用空格分隔
注意:类名不能以数字开头
dir
作用:文字的方向值:ltr/rtl/auto
id
作用:规定元素的唯一标识注意:若浏览器中出现多个id名的情况,CSS样式对所以该id名的元素都生效,但js脚本仅对第一个出现该id名的元素生效
lang
作用:规定元素内容的语言值:en英文/zn中文
style
作用:设置元素的行间样式tabindex
作用:规定元素的tab键次序值:<number>(1是第一个)
<div> <a href="http://www.baidu.com" tabindex="3">百度</a> <a href="http://www.taobao.com" tabindex="2">阿里</a> <a href="http://www.qq.com" tabindex="1">腾讯</a> </div>
title
作用:规定关于元素的额外信息,鼠标移到元素上时显示一段提示文本HTML5新增属性
contenteditable
作用:指定是否可以在浏览器里编辑内容值:true/false
注意:设置document.designMode ='on'时,页面的任意位置都可以编辑;使用contenteditable ='true'则只对具体元素和其包含的元素起作用
移动端:移动端ios5以及android3之后才支持该属性
<演示框>选中文字后,点击下列相应属性值可进行演示
contextmenu(没有浏览器支持)
作用:跟元素关联的右键菜单值:<menu>元素中唯一ID
data-*
作用:用于存储页面或应用程序的私有定制数据注意:属性名不应包含任何大写字母,且在前缀"data-"之后必须有至少一个字符;属性值可以是任意字符串
使用:可以在所有浏览器中使用getAttribute方法来获取data-*属性的值,也可以使用javascript中dataset属性访问data-*属性的值,不过IE10-浏览器不支持dataset
draggable(IE8-不支持)
作用:用户是否可以拖动元素值:true/false/auto
注意:链接和图像默认是可拖动的
dropzone(所有浏览器都不支持)
作用:规定在拖动被拖动数据时是否进行复制、移动或链接值:copy拷贝/move移动/link指向原始数据链接
hidden(IE7-不支持)
作用:显示或隐藏该元素(与display:none的作用一样)值:true/false
spellcheck(IE9-不支持)
作用:规定是否对元素进行拼写和语法检查,对拼写错误的单词会在其下方出现红线范围:可编辑区域(表单或contenteditable元素)
值:true/false
注意:移动端支持不好
translate(所有浏览器都不支持)
作用:规定是否应该翻译元素内容值:yes/no
// var all = document.getElementById('cnblogs_post_body').children;
var select = [];
for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d/)){
select.push(all[i]);
}
}
}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+1])
}
}else{
change(oCon.children[select.length])
}
}
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
var oCon = document.getElementById("content");
for(var i = 1; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}
}
oCon.children[i].onclick = function(){
change(this);
}
}
function change(_this){
for(var i = 1; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>
相关文章推荐
- HTML DOM 属性
- HTML DOM 方法
- HTML DOM 节点
- 我的html 初学第一步 编译器的选择和代码的简单使用
- 【Html】Relative与Absolute组合使用
- 【Html】层模型--固定定位
- 【Html】层模型--相对定位
- 【Html】层模型--绝对定位
- 【Html】什么是层模型?
- 【Html】浮动模型
- 【Html】流动模型(二)
- 【Html】流动模型(一)
- 【Html】双边距问题
- 【Html】元素分类
- 【Html】段落排版--对齐
- 【Html】段落排版--中文字间距、字母间距
- HTML基础
- 【Html】段落排版--行间距(行高)
- 【Html】段落排版--缩进
- 【Html】层叠