本篇博客讲解的是一个小例子,这个例子涉及的范围挺广的,但知识点吗,没有多少。一看就会,属于刚刚入门的那种。
CSS——display/block
display有两个属性值,一个是none,另一个是block,前者会使节点下的部分隐藏,后者会使节点下的部分展开。
js——document
这个东西,准确的还不知道是什么,不过它有很多的方法,其中getElementByTagName能够获得相同元素节点名称的列表。
我认为它类似于一个对象列表。
getElementById:能够获得某个特定iD的元素节点,获得该节点后就能进行下面的操作
一、
className:元素节点的类名称,在JS中可以获得某个元素节点的类名称,也可以给某个元素节点赋值。
二、
innerHtml:节点的文本,在JS中既可以得到某个节点的文本节点,也可以给某个节点赋值文本节点。就是利用元素节点的innerHtml属性。
document
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="treetest.aspx.cs" Inherits="easyuitest.treetest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<style type ="text/css" >
.off
{
display :none ;
}
.yes
{
display:block ;
}
</style>
<body>
<div >
<a id="d" οnclick="show()">+</a>
<span>
<p>dfdfdfdf</p>
</span>
</div>
<script type="text/javascript">
function show() {
var x = document.getElementsByTagName('span')[0];
var y = document.getElementById('d');
if (x.className == "off") {
x.className = "yes";
y.innerHTML = "+"
//document.write(x.className);
}
else {
x.className = "off";
y.innerHTML = "-";
//document.write(x.className);
}
}
// x.className = "";
// document.write("Body 元素 CSS 类为: " + x.className);
// document.write("<br>");
// var y = document.getElementById('d').childNodes[0];
// y.className = "off";
// document.write("另一种方式: ");
// document.write(document.getElementById('myid').className);
</script>
</body>
</html>