DHTML 笔记

本文详细介绍了DHTML(Dynamic HTML)的相关概念和技术细节,包括如何利用CSS和JavaScript实现元素定位、可见性控制及滤镜效果等。同时,还探讨了DOM事件处理,列举了一系列常用事件及其触发条件。

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

DHTML 不是 W3C 标准。
DHTML 结合 CSS 和 JavaScript。

元素必须指定位置属性(relative相对 或者 absolute绝对)。
然后设置下面的属性:
left - the element's left position
top - the element's top position
visibility - specifies whether an element should be visible or hidden
z-index - the element's stack order
clip - element clipping
overflow - how overflow contents are handled

position:relative 指定元素的位置相对于当前元素。
position:absolute 指定元素的位置距离窗口页边。
visibility:visible 元素可见。
visibility:hidden 元素隐藏。
z-index 相当于三维坐标系中的 Z 轴。

滤镜(过滤器?^_^)
使用滤镜时应该总是指定 width 属性。
h1
{
width:100%;
filter:glow;
}

如果 background-color 属性不被设置成 transparent(透明), 一些滤镜的属性将不能工作。
PropertyArgumentDescriptionExample
alphaopacity
finishopacity
style
startx
starty
finishx
finishy 
Allows you to set the opacity of the elementfilter:alpha(opacity=20, finishopacity=100, style=1, startx=0, 
starty=0, finishx=140, finishy=270)
bluradd
direction
strength
Makes the element blurfilter:blur(add=true, direction=90, strength=6);
chromacolorMakes the specified color transparentfilter:chroma(color=#ff0000)
fliphnoneFlips the element horizontallyfilter:fliph;
flipvnoneFlips the element verticallyfilter:flipv;
glowcolor
strength
Makes the element glowfilter:glow(color=#ff0000, strength=5);
graynoneRenders the element in black and whitefilter:gray;
invertnoneRenders the element in its reverse color and brightness valuesfilter:invert;
maskcolorRenders the element with the specified background color, and transparent foreground colorfilter:mask(color=#ff0000);
shadowcolor
direction
Renders the element with a shadowfilter:shadow(color=#ff0000, direction=90);
dropshadowcolor
offx
offy
positive
Renders the element with a dropshadowfilter:dropshadow(color=#ff0000, offx=5, offy=5, positive=true);
waveadd
freq
lightstrength
phase
strength
Renders the element like a wavefilter:wave(add=true, freq=1, lightstrength=3, phase=0, strength=5)
xraynoneRenders the element in black and white with reverse color and brightness valuesfilter:xray;


background-attachment:scroll 页面空闲时滚动。
background-attachment:fixed 页面空闲时固定。

DOM 文档对象模型

事件处理
EventOccurs when...
onaborta user aborts page loading
onblura user leaves an object
onchangea user changes the value of an object
onclicka user clicks on an object
ondblclicka user double-clicks on an object
onfocusa user makes an object active
onkeydowna keyboard key is on its way down
onkeypressa keyboard key is pressed
onkeyupa keyboard key is released
onloada page is finished loading. Note: In Netscape this event occurs during the loading of a page!
onmousedowna user presses a mouse-button
onmousemovea cursor moves on an object
onmouseovera cursor moves over an object
onmouseouta cursor moves off an object
onmouseupa user releases a mouse-button
onreseta user resets a form
onselecta user selects content on a page
onsubmita user submits a form
onunloada user closes a page
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值