标签归档:DOM对象

HTML DOM对象之toggle()方法功能简介说明


摘要:
下文讲述DOM对象中toggle方法的功能简介说明,如下所示:


toggle方法的功能

toggle()方法功能:
此方法用于移除元素中的样式信息

domObject.classList.toggle(class, bool)
—–参数说明—-
domObject:待操作的html元素
class:待删除的样式信息
bool:当此参数值为true时,则添加样式,
当此参数值为flase时,则删除样式信息
当此参数值省略时,系统自动切换样式信息(如存在,则删除,如不存在,则添加样式)
toggle方法注意事项:
1.此方法是html5新增的一个方法,目前支持IE10、edge、chrome、火狐、opera、safria浏览器
2.此方法
toggle(class,true) –其效果等同于 add(class)
toggle(class,false) –其效果等同于 remove(class)


toggle方法的举例说明

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.maomao365.com/" />  
<title>猫猫教程(www.maomao365.com)
-toggle方法演示说明
</title> 
<style>
.one{
  width:180px;
  height:80px;
} 
.two{
  text-align:center;
  line-height:80px;
}
.three{
  background-color:green;
  color:white;font-weight:bold;

}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("container");
  let obt=document.getElementById("btn");
  obt.onclick=function(){
    odiv.classList.toggle("one");
  }
}
</script>  
</head>  
<body>  
<div id="container" class="one two three">猫猫教程</div>
<input type="button" id="btn" value="toggle方法演示"/>
</body>  
</html>
javascript DOM toggle样式自动切换的方法举例

javascript DOM toggle样式自动切换的方法举例

html DOM对象之document.write()方法简介说明


摘要:
下文通过三个实例讲述document.write()的功能简介说明,如下所示:


document.write()的功能及语法说明:

document.write()的功能:
向文档中写入一个或多个字符串

document.write()语法:
document.write(exp1,exp2,exp3,….expN)
———参数说明——-
exp1,exp2,exp3,….expN
向文档写入的多个字符串信息

例:1


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程</title>
<script> 
document.write("document.write测试");
</script> 
</head> 
<body> 
 ****************
</body> 
</html>

上述html会向文档中写入“document.write测试”,并替换“****************”
例:2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程</title>

</head> 
<body> 
 ****************
</body> 
<script> 
document.write("document.write测试");
</script> 
</html>
 

上述html会向文档中写入“document.write测试”,但是是追加在“****************”字符串后面,
那到底是什么原因导致这个现象出现呢?
例3:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程</title>

</head> 
<body> 
 ****************
</body> 
<script> 
  window.onload=function(){
  document.write("document.write测试");
  }
</script> 
</html>
 

上述html会向文档中写入“document.write测试”,并替换“****************”

例2和例3的代码不同之处,例3中 将document.write加入到window.onload 中
分析 例2和例3的运行效果不同,我们可以从document.write的运行机制上着手
document.write运行时,会隐式的调用document.open方法,
document.open将创建一个文档流,然后覆盖原有的内容
————————-
例2:
由于调用document.write时,文档还未close,此时无需调用document.open方法,所以document.write会写入到当前文档的后面
例3:
将document.write放在window.onload方法中,此时文档流已经close了,所以需重新document.open文档流,原文档中的内容会被重新覆盖,所以出现了两种不同效果

html之DOM对象removeAttribute()方法(删除节点属性)功能简介说明


摘要:
下文讲述DOM对象removeAttribute()方法功能说明,如下所示:


DOM removeAttribute()方法功能说明

DOM removeAttribute()方法功能():
用于删除指定元素的属性 。
DOM removeAttribute()方法语法:
element.removeAttribute(name)
—–参数说明—–
element:待移除属性的节点元素
name:属性名称

DOM removeAttribute()方法注意事项:
1.此方法兼容市面上所有流行的浏览器
2.删除不存在的属性和未进行设置(但拥有默认值的属性),则此操作会被忽略


DOM removeAttribute()方法举例说明

例:
使用removeAttribute 删除超链接标签的href属性

   <!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
--removeAttribute 删除属性方法举例说明
</title> 

<script type="text/javascript">
window.onload=function(){
  let btn = document.getElementById("btn");
  btn.onclick = function(){ 
        let olink=document.getElementById("lnkTest");
           olink.removeAttribute("href");
       }
   }  
</script>
</head>
<body> 
<a  href="maomao365.com" id="lnkTest"></a> <br /> 
<input type="button" id="btn" value="removeAttribute方法举例测试" />
</body>
</html>
javascript DOM removeAttribute删除节点属性的方法举例

javascript DOM removeAttribute删除节点属性的方法举例