利用DHTML技术我们可以改变网页中的任何效果
(原理:首行读html页面,然将原有元素隐藏,然后将读得的数据显示)
1,得到HTML元素
2,改变HTML元素
本例是用javaScript脚本来取csdn blog的页头统计,然后改变其位置,(注:本例中只没有将原位置隐藏,大家可以再用javaScript 控制display的方法将其隐藏,这里就不再说了)
<script language="JavaScript">
var h3_array=new Array();
var li_array=new Array();
h3_array=document.body.getElementsByTagName("h3");//取网页中的h3元素对象
li_array=document.body.getElementsByTagName("li");//取网页中的li元素对象
for (var i = 0; i < h3_array.length; i++)
{
var ite_h3_value =h3_array[i].innerHTML;//将元素对象的值取出并放入数组中
}
for (var j=0;j<li_array.length;j++)
{
var ite_li_value =li_array[j].innerHTML;
}
var h3_m1=h3_array[1].innerHTML;//取出数组中的值
var li_m0=li_array[4].innerHTML;
var li_m1=li_array[5].innerHTML;
var li_m2=li_array[6].innerHTML;
var li_m3=li_array[7].innerHTML;
//以下是显示部分
document.writeln("<div id='leftmenu' style='position:absolute; left:-3px; top:800px; width:146px; height:86px; z-index:1; background-color: #102E48; layer-background-color: 102E48; border: 1px none #000000;'>");
document.writeln(" <table width='165' border='0'>");
document.writeln(" <tr>");
document.writeln(" <td>"+h3_m1+"</td>");
document.writeln(" </tr>");
document.writeln(" <tr>");
document.writeln(" <td>"+li_m0+"</td>");
document.writeln(" </tr>");
document.writeln(" <tr>");
document.writeln(" <td>"+li_m1+"</td>");
document.writeln(" </tr>");
document.writeln(" <tr>");
document.writeln(" <td>"+li_m2+"</td>");
document.writeln(" </tr>");
document.writeln(" <tr>");
document.writeln(" <td>"+li_m3+"</td>");
document.writeln(" </tr>");
document.writeln(" </table>");
document.writeln("</div> ");
</script>
这只是DHTML技术中的一个上小应用,如感兴趣的朋友可以和我联系共同探讨。
分享到:
相关推荐
"Winform 窗体中嵌入网页(DHTML 代码和 Winform 应用程序交互)" Winform 窗体中嵌入网页是指在 Winform 应用程序中使用 WebBrowser 控件来嵌入网页,从而实现网页和 Winform 应用程序之间的交互。这种技术可以将...
DHTML的一个显著特点就是能够实现各种动态效果,如鼠标悬停时元素的改变、滚动动画、拖放功能等。JavaScript库如jQuery和Prototype简化了这些操作,提供了更友好的API。例如,使用jQuery的`.animate()`方法可以创建...
命令标识符是DHTML中用于控制网页元素行为的关键元素,如`innerHTML`用于改变HTML元素的内容,`style`属性用于修改元素的样式,`addEventListener`和`removeEventListener`用于添加和移除事件监听器。 2. **缺省...
DOM是另一个重要的概念,它是HTML或XML文档的结构化表示,通过JavaScript可以操作DOM来改变网页内容。理解DOM树的结构和如何遍历、添加、删除或修改节点,对于实现动态网页至关重要。 此外,本书可能还会涵盖一些...
本资源"**DHTML动态网页详解百分百(PDG)**"显然是一个详细讲解DHTML的教程,旨在帮助用户深入了解并熟练运用DHTML来创建富有活力和互动性的网页。 1. **HTML基础**:DHTML建立在HTML(超文本标记语言)之上,HTML是...
HTML应用程序(HTA)是一种特殊的HTML文件,可在本地运行,拥有应用程序的权限,而不仅仅是浏览器中的网页。这部分可能涵盖HTA的创建、安全性和应用实例。 **HTML+TIME参考** HTML+TIME是W3C提出的Timed ...
在DHTML中,JavaScript可以用来动态地改变元素的CSS样式,如颜色、大小、位置等。通过设置或修改元素的`style`属性,可以实现动画效果和响应式设计。 **四、JavaScript方法集** 压缩包中的"〖手册〗JS的方法集.chm...
通过阅读这本书,你可以深入理解DHTML的工作原理,并学会如何将其应用于实际的网页制作中。 总之,DHTML是现代网页开发的重要组成部分,通过掌握HTML、CSS和JavaScript,开发者能够创建出具有吸引力和交互性的网页...
6. **交互性和用户反馈**:DHTML允许网页对用户的操作做出实时反应,比如在用户鼠标悬停时改变元素的外观,或在表单提交前进行验证。这种交互性提升了用户体验,也使得网页更富吸引力。 7. **浏览器兼容性**:由于...
在DHTML中,CSS用于定义动态效果,如过渡、动画和定位,使得网页元素能够根据用户的交互进行动态改变。 **DOM(文档对象模型)**是HTML和XML文档的结构化表示,它将网页内容组织成一个节点树,允许通过JavaScript或...
例如,通过JavaScript,我们可以动态地改变DOM中的元素,进而改变网页的显示效果。 【CSS-P】 CSS-P(Cascading Style Sheets Positioning)是CSS的一个扩展,专注于网页元素的定位。CSS-P提供了更多的布局控制,...
在DHTML中,CSS可以实现动态效果,如动画、过渡和变形,让元素在页面上以各种方式移动、改变大小或改变颜色,为用户提供视觉上的吸引力。 **JavaScript** JavaScript 是一种脚本语言,它是实现DHTML动态功能的核心...
综上所述,CSS在DHTML中的应用不仅提升了代码的可读性和执行效率,还极大地扩展了网页设计的可能性。通过深入理解和熟练运用CSS,开发者可以更好地实现动态效果,创建出更具吸引力和交互性的网页。
熟悉DOM API,理解如何查找、操作和改变文档中的元素,是JavaScript在DHTML中的核心技能。 四、DOM操作 DOM(Document Object Model)是HTML或XML文档的结构表示,允许程序和脚本动态地访问和更新文档内容、结构和...
通过CSS选择器,可以精确地定位到网页中的特定元素并对其进行样式调整。 **JavaScript核心** JavaScript是DHTML的关键,提供网页的动态功能。通过JavaScript,开发者可以编写代码来改变HTML元素的内容、样式,或者...
3. **CSS样式更改**:DHTML允许动态改变元素的CSS样式,实现动态效果。手册可能会介绍如何通过JavaScript操作样式属性,如改变颜色、大小、位置等。 4. **动画与过渡**:DHTML可以创建简单的动画效果,如淡入淡出、...
DHTML(Dynamic HTML)是一种用于构建动态、交互式网页的技术,它结合了HTML、CSS(层叠样式表)、JavaScript和DOM(文档对象模型)等元素,使得网页能够实现动态效果和用户交互。这份“DHTML中文帮助手册”是一个...
在网页开发领域,DHTML(Dynamic HTML)、CSS(Cascading Style ...在学习过程中,深入研究每个领域的细节,如CSS的盒模型、JavaScript的数据类型和作用域,以及DHTML中的动画和拖放效果,都将对提升开发技能大有裨益。
《DHTML动态网页设计与制作》是一本深入探讨DHTML技术的资源集合,它涵盖了创建交互式、动感十足的Web页面所需的各种知识点。DHTML,全称Dynamic HTML,是一种利用HTML、CSS、JavaScript以及DOM(Document Object ...