网站 翻页 实现,ps免抠素材网站大全,苏州网站建设logo,重庆市项目经理在建查询目录
1.innerText和textContent#xff1a;设置标签中的文本内容
2.innerText和innerHTML的区别
2.1 从设置来说
2.2 从获取来说
2.3 总结
3.自定义属性
3.1 自定义属性的引入
3.2 自定义属性设置和获取
3.3 移除某个元素的自定义属性
4.tab切换案例(排他、自定义…目录
1.innerText和textContent设置标签中的文本内容
2.innerText和innerHTML的区别
2.1 从设置来说
2.2 从获取来说
2.3 总结
3.自定义属性
3.1 自定义属性的引入
3.2 自定义属性设置和获取
3.3 移除某个元素的自定义属性
4.tab切换案例(排他、自定义属性综合性应用) 1.innerText和textContent设置标签中的文本内容
textContent属性谷歌、火狐支持IE8不支持innerText属性谷歌、火狐和IE8都支持【实际上innerText是IE8的标准属性并不是W3C标准的属性】
但版本过低的火狐不支持innerText为了考虑全面要使用兼容代码。(封装innerText和textContent)
如果这个属性在浏览器中不支持那么这个属性的类型是undefined所以判断这个属性的类型是不是undefined就知道浏览器
是否支持【typeof 元素对象.属性undefined---true:不支持;false:支持】 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv{width: 100px;height: 100px;border: 1px solid red;}/style
/head
body
input typebutton value设置值 idbtn/
div iddiv你好/div
scriptfunction my$(id){return document.getElementById(id);}//设置任意标签中间的任意文本内容function setInnerText(element,text) {//判断浏览器是否支持这个属性if(typeof element.textContent undefined){//不支持element.innerTexttext;}else{//支持element.textContenttext;}}//获取任意标签中间的任意文本内容function getInnerText(element) {if(typeof element.textContentundefined){return element.innerText;}else{return element.textContent;}}//测试代码my$(btn).onclickfunction () {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 langen
headmeta charsetUTF-8titletab切换案例/titlestyleul {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 classbox idbox1div classheadspan classcurrent体育/spanspan娱乐/spanspan新闻/spanspan综合/span/divdiv classmainulli classcurrent我是体育模块/lili我是娱乐模块/lili我是新闻模块/lili我是综合模块/li/ul/div
/div
scriptfunction my$(id){return document.getElementById(id);}//获取最外面的divvar boxmy$(box1);//获取的是里面的第一个divvar headDivbox.getElementsByTagName(div)[0];//获取所有的span标签var spansheadDiv.getElementsByTagName(span);//获取的是里面的第二个divvar mainDivbox.getElementsByTagName(div)[1];//获取所有的li标签var listmainDiv.getElementsByTagName(li);//循环遍历的方式,添加点击事件for(var i0;ispans.length;i){//在点击之前就把索引保存在span标签中spans[i].setAttribute(index,i);spans[i].onclickfunction () {//第一件事,所有的span的类样式全部移除for(var j0;jspans.length;j){spans[j].removeAttribute(class);}//第二件事,为当前被点击的span,应用类样式this.classNamecurrent;//span被点击的时候获取存储的索引值var numthis.getAttribute(index);//获取所有的li标签,每个li标签先全部隐藏for(var k0;klist.length;k){list[k].removeAttribute(class);}//当前被点击的span对应的li标签显示list[num].classNamecurrent;};}
/script
/body
/html
