JavaScript 高级篇之DOM文档,简单封装及调用、动态(2)


.tooltip{background:url('2.jpg'); border:solid 1px #99ffcc; width:200px;height:200px;}//这里的图片大家要该一下
.toolcontent{background-color:#ffffff; border:solid 1px #99ff00; padding:5px; font:tahoma 12px; color:#000000;}


2、javascript类

复制代码 代码如下:


function Tooltip()
{
this.tooltip = document.createElement("div");
this.tooltip.style.position = "absolute";
this.tooltip.className = "tooltip";
this.content = document.createElement("div");
this.content.style.position = "relative";
this.content.className = "toolcontent";
this.tooltip.appendChild(this.content);
}
Tooltip.prototype.show = function(text,x,y)
{
this.content.innerHTML = text;
this.tooltip.style.left = x+"px";
this.tooltip.style.top = y+"px";
this.tooltip.style.visibility = "visible";
if(this.tooltip.parentNode != document.body)
document.body.appendChild(this.tooltip);
};
Tooltip.prototype.hide = function(){ this.tooltip.style.visibility ="hidden";};
var t = new Tooltip();
function hide()
{
t.hide();
}
function show()
{
t.show("hello ",300,0);
}
function init()
{
document.operator.show.onclick = show;
document.operator.hide.onclick = hide;
}


备注:配合上面使用必须还完成以下步骤:1、将body中的onload=init();2 在body中添加 :
<form name = "operator">
<input type = "button" value = "隐藏" name = "hide"/>
<input type = "button" value = "显示" name = "show">
</form>
效果:(隐藏看到什么了) 

JavaScript 高级篇之DOM文档,简单封装及调用、动态

JavaScript 高级篇之DOM文档,简单封装及调用、动态

9、动态添加样式和删除样式

1、样式表

复制代码 代码如下:


.container{font-family:tahoma;font-size:14px;border:solid 1px #99ffcc; width:200px;height:140px;float:left;}
.container ul{list-style:none;padding:1px 0px 0px 0px; margin:0px;}
.container ul li{ border-bottom:solid 1px #99ffcc; margin:0px;height:27px;}
.container ul li a{background-color:gray;text-decoration:none;display:block; border-left:solid 10px red;margin:0px; padding:5px 0px 5px 10px;}
.container ul li a:hover{background-color:red; color:#ffffff; }


2、工具函数(动态添加、删除样式)

复制代码 代码如下:


var CSSclass = {};
CSSclass.is = function(e,c){
if(typeof e == "string") e = document.getElementById(e);
var classes = e.className;
if(!classes) return false;
if(classes == c) return true;
return e.className.search("\\b" +c +"\\b*") != -1;
};
CSSclass.add = function(e,c){
if(typeof e == "string") e = document.getElementById(e);
if(CSSclass.is(e,c))return;
//if(e.className) c=""+c;
e.className += c;
};
CSSclass.remove = function(e,c){
if(typeof e == "string") e = document.getElementById(e);
//e.id = e.id.replace(new RegExp("\\b" +e.id +"\\b\\s*","g"),"");
e.className = e.className.replace(new RegExp("\\b"+c+"\\b\\s*","g"),"");
};


3、在body中加入如下元素

复制代码 代码如下:


<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">MyBlog</a></li>
<li><a href="#">Sport</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Content</a></li>
</ul>
<button type="button" name ="add" onclick = "CSSclass.add('con','container');">动态添加样式</button>
<button type="button" name ="remove" onclick ="CSSclass.remove('con','container');">动态删除样式</button>


效果: 

JavaScript 高级篇之DOM文档,简单封装及调用、动态


没添加样式的样子

JavaScript 高级篇之DOM文档,简单封装及调用、动态


加了样式之后。

小结:Dom文档操作、内联样式、动态设置样式等就给大家分享到这里吧!其实还有很多细节没给大家呈现。下一篇我将分享我学习事件的历程。

(很多没有备注,大家有问题可以给我留言!) 

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdjzfg.html