目录
1.innerText和textContent：设置标签中的文本内容
1.innerText和textContent：设置标签中的文本内容
- textContent属性：谷歌、火狐支持，IE8不支持
- innerText属性：谷歌、火狐和IE8都支持【实际上，innerText是IE8的标准属性，并不是W3C标准的属性】
但版本过低的火狐不支持innerText，为了考虑全面，要使用兼容代码。(封装innerText和textContent)
如果这个属性在浏览器中不支持，那么这个属性的类型是undefined；所以判断这个属性的类型是不是undefined，就知道浏览器
是否支持【typeof 元素对象.属性=="undefined"---true:不支持;false:支持】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="设置值" id="btn"/>
<div id="div">你好</div>
<script>
function my$(id){
return document.getElementById(id);
}
//设置任意标签中间的任意文本内容
function setInnerText(element,text) {
//判断浏览器是否支持这个属性
if(typeof element.textContent ==="undefined"){//不支持
element.innerText=text;
}else{//支持
element.textContent=text;
}
}
//获取任意标签中间的任意文本内容
function getInnerText(element) {
if(typeof element.textContent==="undefined"){
return element.innerText;
}else{
return element.textContent;
}
}
//测试代码
my$("btn").onclick=function () {
console.log(getInnerText(my$("div")));//你好
setInnerText(my$("div"),"将\"你好\"设置为\"Hello\"");//div里的显示：将"你好"设置为"Hello"
};
</script>
</body>
</html>2.innerText和innerHTML的区别
2.1 从设置来说
总结：
- innerText主要是设置文本内容的，设置标签内容，是没有标签的效果的
- innerHTML可以设置文本内容，主要是在标签中设置新的html标签内容，是有标签效果的
- 想要设置标签内容，使用innerHTML；想要设置文本内容，innerText、textContent、innerHTM都可以，推荐用innerHTML
2.2 从获取来说
总结：
- innerText可以获取标签中间的文本内容，但是标签中如果还有标签，标签里的文本内容也能获取(不获取标签，仅获取内容)
- innerHTML才是真正的获取标签中间的所有内容
2.3 总结
- 如果想要(获取)标签及内容，使用innerHTML
- 想要设置标签，使用innerHTML
- 想要设置文本，用innerText，或者innerHTML，或者textContent
3.自定义属性
3.1 自定义属性的引入
自定义属性：html标签本身没有这个属性，自己添加的，为了存储一些数据
3.2 自定义属性设置和获取
- 设置自定义属性：元素对象.setAttribute("自定义属性的名字","属性的值");
- 获取自定义属性的值：元素对象.getAttribute("自定义属性的名字");
3.3 移除某个元素的自定义属性
移除元素的属性(自定义属性或自带属性都可以)：元素对象.removeAttribute("属性的名字");
4.tab切换案例(排他、自定义属性综合性应用)
*{
/*清除页面中所有标签可能存在的内外边距,但不建议这样使用,会极大地消耗资源*/
margin: 0;
padding: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换案例</title>
<style>
ul {
list-style: none;
/*清除ul标签默认的内外边距*/
margin: 0;
padding: 0;
}
.box {
width: 400px;
border: 1px solid black;
margin: 100px auto;
}
.head {
overflow: hidden;
}
.head span {
display: inline-block;
width: 90px;
line-height: 50px;
margin:auto 5px;
float: left;
background-color: pink;
text-align: center;
cursor: pointer;
}
.head span.current {
background-color: dodgerblue;
}
.main li {
height: 250px;
background-color: dodgerblue;
display: none;/*默认都是不显示*/
}
.main li.current {
display: block;
}
</style>
</head>
<body>
<div class="box" id="box1">
<div class="head">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<div class="main">
<ul>
<li class="current">我是体育模块</li>
<li>我是娱乐模块</li>
<li>我是新闻模块</li>
<li>我是综合模块</li>
</ul>
</div>
</div>
<script>
function my$(id){
return document.getElementById(id);
}
//获取最外面的div
var box=my$("box1");
//获取的是里面的第一个div
var headDiv=box.getElementsByTagName("div")[0];
//获取所有的span标签
var spans=headDiv.getElementsByTagName("span");
//获取的是里面的第二个div
var mainDiv=box.getElementsByTagName("div")[1];
//获取所有的li标签
var list=mainDiv.getElementsByTagName("li");
//循环遍历的方式,添加点击事件
for(var i=0;i<spans.length;i++){
//在点击之前就把索引保存在span标签中
spans[i].setAttribute("index",i);
spans[i].onclick=function () {
//第一件事,所有的span的类样式全部移除
for(var j=0;j<spans.length;j++){
spans[j].removeAttribute("class");
}
//第二件事,为当前被点击的span,应用类样式
this.className="current";
//span被点击的时候获取存储的索引值
var num=this.getAttribute("index");
//获取所有的li标签,每个li标签先全部隐藏
for(var k=0;k<list.length;k++){
list[k].removeAttribute("class");
}
//当前被点击的span对应的li标签显示
list[num].className="current";
};
}
</script>
</body>
</html>
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
