黑马程序员-DOM（第三讲）

最新推荐文章于 2024-02-25 18:11:17 发布

原创最新推荐文章于 2024-02-25 18:11:17 发布 · 743 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #DOM

javascript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript实现网页元素的交互设计，包括调整新闻字体大小、颜色及背景，以及实现列表的展开与折叠功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、新闻字体的大中小样式改变

思路：

1）先有新闻数据，并用标签封装。

<hr/>

内容内容内容内容内容内容内容内容

内容内容内容内容

内容内容

</div>

2）定义一些页面样式

(使得超链接点击前后样式一致)

a:link,a:visited{

color:#0044ff

text-decoration:none;

}

a:hover{

color:#ff8800;

}

#newstext{

width:400px;

border:#00ff00 1px solid;(//表示实线)

padding：10px;

}

</style>

3)确定谁是事件源和事件，以及处理方式中被处理的节点

事件源：a标签事件：onClick

被处理节点 id为newstext

现在我们取消掉超链接的默认点击效果。

修改：<a href=”javascript:void(0)”>大字体</a>

//这表示启动javascript引擎，并执行后面这个函数，而void（0）表示什么都不做。

4）注册新事件

修改：<a href=”javascript:void(0)” onclick=”changeFont(‘26px’)”>大字体</a>

既然三个超链接的功能都一样（都是改变字体大小）

我们就定义一个函数来完成，通过超链接的文本来区分点击的哪个超链接

(先说明一些静态效果是如何实现的呢？

内容内容内容内容内容内容内容内容

内容内容内容内容

内容内容

</div>

)

function changeFont(size){

var odivNode=document.getElementById(“newstext”);

odivNode.style.fontSize=size;

}

</script>

//上面给字体改变大小的功能就算完成了，但是现在我想在改变字体大小的同时改变字体颜色，你肯会说，那简单啊，再传递个字体颜色的参数就行了，那我现在还想要改变字体的背景颜色呢？我还要让字体是否加粗，倾向呢？

你会发现上面这种方式其实并不合适，js代码和CSS代码耦合性太高，不利于扩展

解决办法：将多个所需的样式进行封装，封装到选择器中，只要个指定的标签加载不同的选择器就可以了。

步骤：

1、预定义一些样式封装到选择器中，一般使用类选择器

.norm{

color:#000000;

font-size:16px;

background-color:#cdd8d0;

}

.max{

color:#808080;

font-size:28px;

background-color:#9ce9b4;

}

.min{

color:#ff0000;

font-size:28px;

background-color:#f1b96d;

}

修改代码：

<div id=”newstext” class=”norm”> //注意这里默认类选择器设置为norm

function changeFont(selectorName)

{

Var odivNode=document.getElementById(“newstext”);

odivNode.className=selectorName;

}

二、展开闭合列表

<dl>

<dt>显示列表一</dt>

<dd>显示条目一</dd>

<dd>显示条目二</dd>

<dd>显示条目三</dd>

<dd>显示条目四</dd>

<dd>显示条目五</dd>

</dl>

注意是带缩进的（列表跟条目之间有明显的缩进效果，而要取消缩进效果可以给dl,dd设置）

dl dd{

margin:0px;

}

</style>

现在我们得先将显示条目隐藏，点击显示列表的时候再显示出来

这要利用CSS中的一个布局：overflow

dl{

height :16px //字体默认大小16px；

overflow:hidden; //表示超出部分做何响应

}

再明确一下思路：

（

1）标签封装数据，HTML

2）定义样式 css

3）明确事件源，事件，以及要处理的节点 dom

4）明确具体的操作方式，其实就是事件的处理内容 js

）

事件源：dt标签

修改：<dt onclick=”list()”>显示条目</dt>

function list(0

{

//思路：无非就是将dl属性的overflow的值改为visible即可，所以要先获取dl节点，然后改变该节点的style的overflow的属性

var oDlNode=document.getElementByTagName(“dl”)[0];

oDlNode.style.overflow=”visible”;

}

</script>

现在点击一下出来了，但是收不回去了，所以我们再弄个标记变量，

就是说

Var flag=true;

if(flag)

{

oDlNode.style.overflow=”visible”;

flag=false;

}

else

{

oDlNode.style.overflow=”hidden”;

flag=true;

}

但是这样做并不好，就是耦合过于紧密，解决办法就是预定义一些样式。

//预定义一些样式，类选择器，便于给标签样式的动态加载

.close

{

overflow:hidden;

}

.open

{

overflow:visible;

}

修改代码：

var oDlNode=document.getElementByTagName(“dl”)[0];

if（oDlNode.className==”close”）

{

oDlNode.className=”open”;

}

else

{

oDlNode.className=”close”;

}

现在如果有很多<dl>标签呢？都要实现这个效果，点击展开，点击关闭

或许你会想到

function list(index)

{

var oDlNode=document.getElementByTagName(“dl”)[index];

}

就可以了，但是这样做也不好（原因不说了，比如说<dl>标签之间掉个位置就会出问题）

修改：将本对象传入

function list(node)

{

var oDlNode=node.parentNode;

if(oDlNode.className=”close”)

{

oDlNode.className=”open”;

}

else

{

oDlNode.className=”close”;

}

需求：在多个列表下，一次只需要展开一个列表，其他列表都关闭，怎么保证开一个而关闭其他呢？

思路：

1、过去所有dl节点

2、遍历这些节点，只对当前的dl节点进行展开或闭合操作，其他节点都进行闭合操作

Function list(node)

{

//获取当前节点

Var oDlNode=node.parentNode;

//获取所有的dl节点

Var collDlNodes=document.getElementByTagName(“dl”);

For(var x=0;x<collDlNodes.length;x++)

{

If(collDlNodes[x]==oDlNode)

{

if(oDlNode.className=”close”)

{

oDlNode.className=”open”;

}

else

{

oDlNode.className=”close”;

}

Else

{

oDlNode.className=”close”;

}