`
beyond429
  • 浏览: 96050 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

DHTML 页面对象属性

浏览器IE框架J# 
阅读更多
document.title             //设置文档标题等价于HTML的<title>标签
document.bgColor           //设置页面背景色
document.fgColor           //设置前景色(文本颜色)
document.linkColor         //未点击过的链接颜色
document.alinkColor        //激活链接(焦点在此链接上)的颜色
document.vlinkColor        //已点击过的链接颜色
document.URL               //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate   //文件建立日期，只读属性
document.fileModifiedDate  //文件修改日期，只读属性
document.fileSize          //文件大小，只读属性
document.cookie            //设置和读出cookie
document.charset           //设置字符集 简体中文:gb2312
---------------------------------------------------------------------
对象方法
document.write()                  //动态向页面写入内容
document.createElement(Tag)       //创建一个html标签对象
document.getElementById(ID)       //获得指定ID值的对象
document.getElementsByName(Name)  //获得指定Name值的对象
---------------------------------------------------------------------

images集合(页面中的图象)

a)通过集合引用
document.images             //对应页面上的<img>标签
document.images.length      //对应页面上<img>标签的个数
document.images[0]          //第1个<img>标签          
document.images[i]          //第i-1个<img>标签

b)通过nane属性直接引用
<img name="oImage">
document.images.oImage      //document.images.name属性

c)引用图片的src属性
document.images.oImage.src  //document.images.name属性.src

d)创建一个图象
var oImage
oImage = new Image()
document.images.oImage.src="http://www.webjx.com/1.jpg"
同时在页面上建立一个<img>标签与之对应就可以显示

<html>
<img name=oImage>
<script language="javascript">
   var oImage
   oImage = new Image()
   document.images.oImage.src="http://www.webjx.com/1.jpg"
</script>
</html>

----------------------------------------------------------------------

forms集合(页面中的表单)

a)通过集合引用
document.forms                 //对应页面上的<form>标签
document.forms.length          //对应页面上<form>标签的个数
document.forms[0]              //第1个<form>标签
document.forms[i]              //第i-1个<form>标签
document.forms[i].length       //第i-1个<form>中的控件数
document.forms[i].elements[j]  //第i-1个<form>中第j-1个控件

b)通过标签name属性直接引用
<form name="Myform"><input name="myctrl"></form>
document.Myform.myctrl         //document.表单名.控件名

-----------------------------------------------------------------------
<html>
<!--Text控件相关Script-->
<form name="Myform">
<input type="text" name="oText">
<input type="password" name="oPswd">
<form>
<script language="javascript">
//获取文本密码框的值
document.write(document.Myform.oText.value)
document.write(document.Myform.oPswd.value)
</script>
</html>
-----------------------------------------------------------------------
<html>
<!--Select控件相关Script-->
<form name="Myform">
<select name="oSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>

<script language="javascript">
   //遍历select控件的option项
   var length
   length=document.Myform.oSelect.length
   for(i=0;i<length;i++)
   document.write(document.Myform.oSelect[i].value)
</script>

<script language="javascript">
   //遍历option项并且判断某个option是否被选中
   for(i=0;i<document.Myform.oSelect.length;i++){
   if(document.Myform.oSelect[i].selected!=true)
   document.write(document.Myform.oSelect[i].value)
   else
   document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>")  
   }
</script>

<script language="javascript">
   //根据SelectedIndex打印出选中的option
   //(0到document.Myform.oSelect.length-1)
   i=document.Myform.oSelect.selectedIndex
   document.write(document.Myform.oSelect[i].value)
</script>

<script language="javascript">
   //动态增加select控件的option项
   var oOption = document.createElement("OPTION");
   oOption.text="4";
   oOption.value="4";
   document.Myform.oSelect.add(oOption);
</script>
<html>
-----------------------------------------------------------------------
<Div id="oDiv">Text</Div>
document.all.oDiv                       //引用图层oDiv
document.all.oDiv.style                
document.all.oDiv.style.display=""      //图层设置为可视
document.all.oDiv.style.display="none"  //图层设置为隐藏
/*document.all表示document中所有对象的集合
只有ie支持此属性，因此也用来判断浏览器的种类*/
click() 对象.click() 使对象被点击。
closed 对象.closed 对象窗口是否已关闭true/false
clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象
confirm("提示信息") 弹出确认框，确定返回true取消返回false
cursor:样式 更改鼠标样式 hand crosshair text wait help default auto e/s/w/n-resize

event.clientX 返回最后一次点击鼠标X坐标值；
event.clientY 返回最后一次点击鼠标Y坐标值；
event.offsetX 返回当前鼠标悬停X坐标值
event.offsetY 返回当前鼠标悬停Y坐标值

document.write(document.lastModified) 网页最后一次更新时间
document.ondblclick=x 当双击鼠标产生事件
document.onmousedown=x 单击鼠标键产生事件

document.body.scrollTop; 返回和设置当前竖向滚动条的坐标值，须与函数配合,
document.body.scrollLeft; 返回和设置当前横向滚动务的坐标值，须与函数配合，
document.title document.title="message"; 当前窗口的标题栏文字
document.bgcolor document.bgcolor="颜色值"; 改变窗口背景颜色
document.Fgcolor document.Fgcolor="颜色值"; 改变正文颜色
document.linkcolor document.linkcolor="颜色值"; 改变超联接颜色
document.alinkcolor document.alinkcolor="颜色值"; 改变正点击联接的颜色
document.VlinkColor document.VlinkColor="颜色值"; 改变已访问联接的颜色
document.forms.length 返回当前页form表单数
document.anchors.length 返回当前页锚的数量
document.links.length 返回当前页联接的数量
document.onmousedown=x 单击鼠标触发事件
document.ondblclick=x 双击鼠标触发事件
defaultStatus window.status=defaultStatus; 将状态栏设置默认显示

function function xx(){...} 定义函数
isNumeric 判断是否是数字
innerHTML xx=对象.innerHTML 输入某对象标签中的html源代码
innerText divid.innerText=xx 将以div定位以id命名的对象值设为XX

location.reload(); 使本页刷新，target可等于一个刷新的网页

Math.random() 随机涵数,只能是0到1之间的数,如果要得到其它数,可以为*10,再取整
Math.floor(number) 将对象number转为整数，舍取所有小数
Math.min(1,2) 返回1,2哪个小
Math.max(1,2) 返回1,2哪个大

navigator.appName 返回当前浏览器名称
navigator.appVersion 返回当前浏览器版本号
navigator.appCodeName 返回当前浏览器代码名字
navigator.userAgent 返回当前浏览器用户代标志

onsubmit onsubmit="return(xx())" 使用函数返回值
opener opener.document.对象 控制原打开窗体对象

prompt xx=window.prompt("提示信息","预定值"); 输入语句
parent parent.框架名.对象 控制框架页面

return return false 返回值
random 随机参数（0至1之间）
reset() form.reset(); 使form表单内的数据重置

split("") string.split("") 将string对象字符以逗号隔开
submit() form对象.submit() 使form对象提交数据

String对象的 charAt(x)对象 反回指定对象的第多少位的字母
lastIndexOf("string") 从右到左询找指定字符，没有返回-1
indexOf("string") 从左到右询找指定字符，没有返回-1
LowerCase() 将对象全部转为小写
UpperCase() 将对象全部转为大写
substring(0,5) string.substring(x,x) 返回对象中从0到5的字符
setTimeout("function",time) 设置一个超时对象
setInterval("function",time) 设置一个超时对象

toLocaleString() x.toLocaleString() 从x时间对象中获取时间，以字符串型式存在
typeof(变量名) 检查变量的类型，值有：String,Boolean,Object,Function,Underfined

window.event.button==1/2/3 鼠标键左键等于1右键等于2两个键一起按为3
window.screen.availWidth 返回当前屏幕宽度(空白空间)
window.screen.availHeight 返回当前屏幕高度(空白空间)
window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)
window.document.body.offsetHeight; 返回当前网页高度
window.document.body.offsetWidth; 返回当前网页宽度
window.resizeTo(0,0) 将窗口设置宽高
window.moveTo(0,0) 将窗口移到某位置
window.focus() 使当前窗口获得焦点
window.scroll(x,y) 窗口滚动条坐标，y控制上下移动，须与函数配合
window.open() window.open("地址","名称","属性")
属性:toolbar(工具栏),location(地址栏),directions,status(状态栏),
menubar(菜单栏),scrollbar(滚动条),resizable(改变大小), width(宽),height(高),fullscreen(全 屏),scrollbars(全屏时无滚动条无参 数,channelmode(宽屏),left(打开窗口x坐标),top(打开窗口y坐标)
window.location = 'view-source:' + window.location.href 应用事件查看网页源代码;

a=new Date(); //创建a为一个新的时期对象
y=a.getYear(); //y的值为从对象a中获取年份值 两位数年份
y1=a.getFullYear(); //获取全年份数 四位数年份
m=a.getMonth(); //获取月份值
d=a.getDate(); //获取日期值
d1=a.getDay(); //获取当前星期值
h=a.getHours(); //获取当前小时数
m1=a.getMinutes(); //获取当前分钟数
s=a.getSeconds(); //获取当前秒钟数

对象.style.fontSize="文字大小";
单位：mm/cm/in英寸/pc帕/pt点/px象素/em文字高
1in=1.25cm
1pc=12pt
1pt=1.2px(800*600分辩率下)

文本字体属性：
fontSize大小
family字体
color颜色
fontStyle风格，取值为normal一般,italic斜体,oblique斜体且加粗
fontWeight加粗,取值为100到900不等,900最粗,light,normal,bold
letterSpacing间距,更改文字间距离,取值为,1pt,10px,1cm
textDecoration:文字修饰;取值,none不修饰,underline下划线,overline上划线
background:文字背景颜色,
backgroundImage:背景图片,取值为图片的插入路径

点击网页正文函数调用触发器：

1.onClick 当对象被点击
2.onLoad 当网页打开,只能书写在body中
3.onUnload 当网页关闭或离开时,只能书写在body中
4.onmouseover 当鼠标悬于其上时
5.onmouseout 当鼠标离开对象时
6.onmouseup 当鼠标松开
7.onmousedown 当鼠标按下键
8.onFocus 当对象获取焦点时
9.onSelect 当对象的文本被选中时
10.onChange 当对象的内容被改变
11.onBlur 当对象失去焦点
onsubmit=return(ss())表单调用时返回的值

直线 border-bottom:1x solid black
虚线 border-bottom:1x dotted black
点划线 border-bottom:2x dashed black
双线 border-bottom:5x double black
槽状 border-bottom:1x groove black
脊状 border-bottom:1x ridge black

1.边缘高光glow(color=颜色,strength=亮光大小)
分享到：
| checkbox 多选传值
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    动态 HTML (DHTML) 对象模型参考

    DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 HTML 参考 HTML 元素 HTML 字符集 样式表(CSS)参考 CSS 属性参考 CSS 长度单位参考 其他参考 命令标识符 缺省行为参考 htc 行为参考 可视化...

    DHTML文档对象模型

    **DHTML文档对象模型** DHTML（Dynamic HTML）是一种用于创建动态、交互式网页的技术，它结合了HTML、CSS（层叠样式表）、JavaScript以及DOM（文档对象模型）等技术，使得网页内容能够实时更新、交互性和动画效果...

    HTML (DHTML) 对象模型参考中文手册

    HTML（Dynamic HTML）和DHTML对象模型是网页开发中的核心概念，它们极大地丰富了静态HTML的交互性和动态性。DHTML结合了HTML、CSS（层叠样式表）、JavaScript以及DOM（文档对象模型），使得网页可以实现动态效果和...

    DHTML对象模型参考手册

    &lt;br&gt;动态 HTML (DHTML) 对象模型参考 &lt;br&gt;DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 HTML 参考 &lt;br&gt;HTML 元素 HTML 字符集 样式表(CSS)参考 &lt;br&gt;CSS 属性...

    DHTML 文档对象模型手册

    JavaScript的DOM接口提供了诸如`getElementById`、`getElementsByClassName`、`querySelector`和`querySelectorAll`等方法，用于获取页面上的元素，以及`innerHTML`、`innerText`、`setAttribute`等属性来修改元素的...

    DHTML文档对象模型中文手册 开发技术 - Web开发.zip

    DHTML（Dynamic HTML）是一种用于构建动态、交互式Web页面的技术，它结合了HTML、CSS（层叠样式表）、JavaScript和DOM（文档对象模型）来实现网页的动态效果。本手册主要针对DHTML中的重要组成部分——DOM进行详细...

    DHTML 文档对象模型中文手册

    在这个"DHTML文档对象模型中文手册"中，我们将深入探讨DOM的基本概念、主要特性以及如何在实际开发中应用。 DOM是W3C（万维网联盟）定义的一个标准，它将HTML或XML文档解析为一个由节点组成的树形结构。这个树中的...

    DHTML手册（js+Css）CHM

    DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 HTML 参考 HTML 元素 HTML 字符集 样式表(CSS)参考 CSS 属性参考 CSS 长度单位参考 其他参考 命令标识符 缺省行为参考 htc 行为参考 可视化...

    DHTML手册 DHTML手册

    JavaScript作为DHTML的核心，提供了事件处理、对象创建和函数调用等功能。通过监听用户的交互，如点击、滚动等，JavaScript可以触发相应的动态效果，实现页面的实时更新。此外，JavaScript还可以与服务器进行异步...

    DHTML对象模型参考手册chm

    《DHTML对象模型参考手册》是一本非常宝贵的资源，它深入浅出地介绍了DHTML（Dynamic HTML）的核心——对象模型。DHTML是HTML的一种增强，它允许网页具有动态交互性和实时更新的能力，使得网页不再仅仅是静态的信息...

    DHTML手册 默认行为 文档对象模型3合1

    DHTML文档对象模型.CHM可能包含以下内容： 1. **DOM层次结构**：解释DOM树的概念，包括元素节点、属性节点、文本节点等，以及它们之间的关系。 2. **DOM接口**：介绍Node、Element、Attribute等核心接口，以及如何...

    DHTML 对象模型参考

    DHTML（Dynamic HTML）是一种用于创建动态、交互式网页的技术，它结合了HTML、CSS（层叠样式表）、JavaScript以及DOM（文档对象模型）等技术，使得网页内容能够实时更新、交互操作且无需重新加载页面。DHTML的主要...

    Dhtml手册(Dhtml手册.chm)

    它结合了HTML、CSS（层叠样式表）、JavaScript以及DOM（文档对象模型）等技术，使得网页可以实现动态交互效果，无需刷新页面就能更新内容。本Dhtml手册.chm文件是一个关于DHTML的综合参考资料，对于想要深入了解和...

    DHTML参考手册DHTML参考手册

    通过下列链接访问参考资料，可帮助你创建引人注目的 Web 页面。 动态 HTML (DHTML) 对象模型参考 DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 HTML 参考 HTML 元素 HTML 字符集 样式表(CSS)...

    dhtml对象帮助，js帮助

    4. **对象与原型**：JavaScript中的万物皆为对象，每个对象都有一个原型链，可以继承属性和方法。 5. **事件处理**：JavaScript可以监听并响应用户的交互事件，如点击、鼠标移动、键盘输入等。 6. **DOM操作**：...

    DHTML 手册

    例如，`addEventListener`用于绑定事件处理函数，`document.getElementById`用于获取页面上的特定元素，`style`对象则可以用来直接改变元素的CSS属性。 **DOM文档对象模型** DOM是HTML和XML文档的结构化表示，它将...

    DHTML文档帮助，可查询dom对象，html的对象，方法等。编写js代码的常用工具。

    在DHTML中，DOM操作是动态更新页面的核心。这可能包括创建新元素、删除元素、改变元素的属性、移动元素位置、更新元素内容等。手册会提供实例和代码示例来说明这些操作的具体步骤和语法。 5. **事件处理** DHTML...

Magicbox
Global site tag (gtag.js) - Google Analytics