下载
加入VIP
  • 专属下载特权
  • 现金文档折扣购买
  • VIP免费专区
  • 千万文档免费下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 Attribute是属性的意思 文章仅对部分兼容IE和FF的Attribute相关的介绍。

Attribute是属性的意思 文章仅对部分兼容IE和FF的Attribute相关的介绍。.doc

Attribute是属性的意思 文章仅对部分兼容IE和FF的A…

yang振强
2017-08-31 0人阅读 举报 0 0 暂无简介

简介:本文档为《Attribute是属性的意思 文章仅对部分兼容IE和FF的Attribute相关的介绍。doc》,可适用于综合领域

Attribute是属性的意思文章仅对部分兼容IE和FF的Attribute相关的介绍。attributes:获取一个属性作为对象getAttribute:获取某一个属性的值setAttribute:建立一个属性并同时给属性捆绑一个值createAttribute:仅建立一个属性removeAttribute:删除一个属性getAttributeNode:获取一个节点作为对象setAttributeNode:建立一个节点removeAttributeNode:删除一个节点attributes可以获取一个对象中的一个属性并且作为对象来调用注意在这里要使用“”IE在这里可以使用“()”考虑到兼容性的问题要使用“”。关于attributes属性的使用方式上IE和FF有巨大的分歧在此不多介绍。attributes的使用方法:(IE和FF通用)Html代码<body><divid="t"><inputtype="hidden"id="sss"value="aaa"><div><body>Js代码<script>vard=documentgetElementById("sss")attributes"value"documentwrite(dname)documentwrite(dvalue)显示valueaaa<script>getAttributesetAttributecreateAttributeremoveAttribute四兄弟的概念比较容易理解使用方法也比较简单唯一需要注意这几点:、createAttribute在使用的时候不需要基于对象的documentcreateAttribute()就可以。、setAttributecreateAttribute在使用的时候如果是使用的时候不要使用nametypevalue等单词IE都FF的反应都奇怪的难以理解。、createAttribute在使用的时候如果只定义了名字没有dnodeValue="hello"语句定义值FF会认为是一个空字符串IE认为是undefined注意到这点就可以了。getAttribute的使用方法:Html代码<body><divid="t"><inputtype="hidden"id="sss"value="aaa"><div><body>Js代码<script>vard=documentgetElementById("sss")getAttribute("value")documentwrite(d)显示aaa<script>setAttribute的使用方法:(你会发现多了一个名为good的属性hello)Html代码<body><divid="t"><inputtype="hidden"id="sss"value="aaa"><div><body>Js代码<script>vard=documentgetElementById("sss")setAttribute("good","hello")alert(documentgetElementById("t")innerHTML)<script>createAttribute的使用方法:(多了一个名为good的空属性)Html代码<body><divid="t"><inputtype="hidden"id="sss"value="aaa"><div><body>Js代码<script>vard=documentcreateAttribute("good")documentgetElementById("sss")setAttributeNode(d)alert(documentgetElementById("t")innerHTML)<script>removeAttribute的使用方法:(少了一个)Html代码<body><divid="t"><inputtype="hidden"id="sss"value="aaa"><div><body>Js代码<script>vard=documentgetElementById("sss")removeAttribute("value")alert(documentgetElementById("t")innerHTML)<script>getAttributeNodesetAttributeNoderemoveAttributeNode三个方法的特点是都直接操作一个node(节点)removeAttributeNode在一开始的时候总会用错但是充分理解了node的含义的时候就能够应用自如了。getAttributeNode的使用方法:Html代码<body><divid="t"><inputtype="hidden"id="sss"value="aaa"><div><body>Js代码<script>vard=documentgetElementById("sss")getAttributeNode("value")documentwrite(dname)documentwrite(dvalue)显示valueaaa<script>setAttributeNode的使用方法:Html代码<body><divid="t"><inputtype="hidden"id="sss"value="aaa"><div><body>Js代码<script>vard=documentcreateAttribute("good")documentgetElementById("sss")setAttributeNode(d)alert(documentgetElementById("t")innerHTML)<script>removeAttributeNode的使用方法:Html代码<body><divid="t"><inputtype="hidden"id="sss"value="aaa"><div><body>Js代码<script>vard=documentgetElementById("sss")getAttributeNode("value")documentgetElementById("sss")removeAttributeNode(d)alert(documentgetElementById("t")innerHTML)<script>ffxadd<html><body><divid="t"><inputtype="hidden"id="sss"value="aaa"><div><scripttype="textjavascript">vard=documentcreateAttribute("good")documentgetElementById("sss")setAttributeNode(d)alert(documentgetElementById("t")innerHTML)vard=documentgetElementById("sss")setAttribute("good","hello")alert(documentgetElementById("t")innerHTML)<script><body><html><html><body><fontsize="">Thisissometext!<font><scripttype="textjavascript">varonode=documentcreateTextNode("Thisddzdsaddissssnew")varopara=documentcreateElement("font")oparaappendChild(onode)varelement=documentgetElementsByTagName("font")appendChild(opara)vard=documentgetElementsByTagName("font")setAttribute("color","red")vard=documentgetElementsByTagName("font")setAttribute("color","red")vard=documentgetElementsByTagName("font")setAttribute("size","")alert(documentgetElementsByTagName("font")innerHTML)alert(documentgetElementsByTagName("font")innerHTML)<script><body><html><html><body><fontsize="">Thisissometext!<br><br><font><scripttype="textjavascript">varonode=documentcreateTextNode("Thisddzdsaddissssnew")varopara=documentcreateElement("font")oparaappendChild(onode)varelement=documentgetElementsByTagName("font")appendChild(opara)vard=documentgetElementsByTagName("font")setAttribute("color","red")vard=documentgetElementsByTagName("font")setAttribute("color","red")vard=documentgetElementsByTagName("font")setAttribute("size","")alert(documentgetElementsByTagName("font")innerHTML)alert(documentgetElementsByTagName("font")innerHTML)<script><body><html><html><body><scripttype="textjavascript">varelement=documentcreateElement("div")elementclassName="message"vartextNode=documentcreateTextNode("<Strong>Hello<Strong>")elementappendChild(textNode)documentbodyappendChild(element)<script><body><html><!DOCTYPEHTML><html><head><metacharset="gb"><title><title><style><style><head><body><script>vardiv=documentcreateElement('div')divstylefontSize='px'vartxt=documentcreateTextNode('')divappendChild(txt)documentbodyappendChild(div)<script><body><html><html><head><head><body><script>windowonload=function(){DIVSELECT()}functionDIVSELECT(){vardiv=documentcreateElement("div")divid="DIVI"divstylewidth="px"divstyleborderRight="blackpxsolid"divstyleborderBottom="blackpxsolid"varlisINPUT=addSELECT("数据","数据","数据n")divappendChild(lisINPUT)documentbodyappendChild(div)}functionaddSELECT(values){varSELECT=documentcreateElement("SELECT")SELECTid="type"SELECTstylewidth="px"varfgmt=documentcreateDocumentFragment()for(vari=i<valueslengthi){varopt=documentcreateElement("OPTION")optsetAttribute("value",i)optappendChild(documentcreateTextNode(valuesi))fgmtappendChild(opt)}SELECTappendChild(fgmt)returnSELECT}<script><body><html><html><head><title>margin外边距<title><styletype="textcss">#margin{float:leftwidth:pxmargin:pxpxpxpxbackground:gray}#automargin{float:leftbackground:bluewidth:px}<style><head><body><p>没有设置外边距的普通段落。<p>下左分别为:px<pid="margin">带缩进的段落。外边距设置:按顺时针方向上右pxpxpx。<p><pid="automargin">设置位置水平居中的段落不是指里面的内容,margin:pxauto<p><body><html><html><head><title>margin外边距<title><styletype="textcss">#margin{float:leftwidth:pxmargin:pxpxpxpxbackground:gray}#automargin{float:leftbackground:bluewidth:px}<style><head><body><p>没有设置外边距的普通段落。<p><pstyle="backgroundcolor:#EEEEEEheight:pxwidth:pxtextalign:topmargin:pxpxpxpx">带缩进的段落。外边距设置:按顺时针方向上右下左分别为:pxpxpxpx。<p><pid="automargin">设置位置水平居中的段落不是指里面的内容,margin:pxauto<p><body><html><html><head><title>margin外边距<title><styletype="textcss">#margin{float:leftwidth:pxmargin:pxpxpxpxbackground:gray}#automargin{float:leftbackground:bluewidth:px}<style><head><body><p>没有设置外边距的普通段落。<p><pstyle="backgroundcolor:#EEEEEEheight:pxwidth:pxtextalign:topmargin:pxpxpxpxfontsize:pxcolor:red">带缩进的段落。外边距设置:按顺时针方向上右下左分别为:pxpxpxpx。<p><pid="automargin">设置位置水平居中的段落不是指里面的内容,margin:pxauto<p><body><html><html><head><scripttype="textjavascript">functionsetFont(){documentgetElementById("p")stylefont="italicboldpxarial,serif"}<script><head><body><pid="p">Thisisanexampleparagraph<p><inputtype="button"onclick="setFont()"value="Changefont"><body><html><html><head><styletype="textcss">pnormal{fontstyle:normal}pitalic{fontstyle:italic}poblique{fontstyle:oblique}<style><head><body><pclass="normal">Thisisaparagraph,normal<p><pclass="italic">Thisisaparagraph,italic<p><pclass="oblique">Thisisaparagraph,oblique<p><body><html><html><head><styletype="textcss">pex{font:italicarial,sansserif}pex{font:italicboldpxpxarial,sansserif}<style><head><body><pclass="ex">ThisisaparagraphThisisaparagraphThisisaparagraphThisisaparagraphThisisaparagraphThisisaparagraphThisisaparagraphThisisaparagraph<p><pclass="ex">ThisisaparagraphThisisaparagraphThisisaparagraphThisisaparagraphThisisaparagraphThisisaparagraphThisisaparagraphThisisaparagraph<p><body><html><html><head><title>margin外边距<title><head><body><p>没有设置外边距的普通段落。<p><pstyle="backgroundcolor:#EEEEEEheight:pxwidth:pxtextalign:topmargin:pxpxpxpxfontsize:pxcolor:redfontstyle:italicfontweight:bold">带缩进的段落。外边距设置:按顺时针方向上右下左分别为:pxpxpxpx。<p><body><html>内联样式由于要将表现和内容混杂在一起内联样式会损失掉样式表的许多优势。请慎用这种方法例如当样式仅需要在一个元素上应用一次时。要使用内联样式你需要在相关的标签内使用样式(style)属性。Style属性可以包含任何CSS属性。本例展示如何改变段落的颜色和左外边距:<pstyle="color:siennamarginleft:px">Thisisaparagraph<p>缩进文本把Web页面上的段落的第一行缩进这是一种最常用的文本格式化效果。CSS提供了textindent属性该属性可以方便地实现文本缩进。通过使用textindent属性所有元素的第一行都可以缩进一个给定的长度甚至该长度可以是负值。这个属性最常见的用途是将段落的首行缩进下面的规则会使所有段落的首行缩进em:p{textindent:em}注意:一般来说可以为所有块级元素应用textindent但无法将该属性应用于行内元素图像之类的替换元素上也无法应用textindent属性。不过如果一个块级元素(比如段落)的首行中有一个图像它会随该行的其余文本移动。提示:如果想把一个行内元素的第一行“缩进”可以用左内边距或外边距创造这种效果。使用负值textindent还可以设置为负值。利用这种技术可以实现很多有趣的效果比如“悬挂缩进”即第一行悬挂在元素中余下部分的左边:p{textindent:em}不过在为textindent设置负值时要当心如果对一个段落设置了负值那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题建议针对负缩进再设置一个外边距或一些内边距:p{textindent:empaddingleft:em}使用百分比值textindent可以使用所有长度单位包括百分比值。百分数要相对于缩进元素父元素的宽度。换句话说如果将缩进值设置为所影响元素的第一行会缩进其父元素宽度的。在下例中缩进值是父元素的即个像素:div{width:px}p{textindent:}<div><p>thisisaparagragh<p><div>继承textindent属性可以继承请考虑如下标记:div#outer{width:px}div#inner{textindent:}p{width:px}<divid="outer"><divid="inner">sometextsometextsometext<p>thisisaparagragh<p><div><div>以上标记中的段落也会缩进像素这是因为这个段落继承了id为inner的div元素的缩进值。

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

文档小程序码

使用微信“扫一扫”扫码寻找文档

1

打开微信

2

扫描小程序码

3

发布寻找信息

4

等待寻找结果

我知道了
评分:

/18

Attribute是属性的意思 文章仅对部分兼容IE和FF的Attribute相关的介绍。

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利