1：元素的样式操作案例
2：innerText和innerContent兼容代码
3：自定义属性
1：元素的样式操作案例
案例1：小图大图的切换
思路：大图放在a链接里面，是看不到的,里面再包一个img小图
当你点击小图的时候，其实就是在点大图的链接，然后把大图的href赋值给指定的图片，如果不想丢掉当前页面，可以组织超链接默认跳转，return false
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>
<a href="../../images/1.jpg" id="ak"><img src="../../images/1-small.jpg" alt=""/></a>
<img src="" alt="" id="big"/>
<script src="../../common.js"></script>
<script>my$("ak").onclick = function () { //看到的是小图，但是大图是链接，看不到，当你一点及的时候就会跳转，也就是会变成大图，这时候赋值给新的ing来接收my$("big").src = this.href;
// return false; //阻止跳转}
</script>
</body>
</html>
案例2：美女相册
思路：思路和点一张图片跳到另一个图片一样，只不过注意一点
Src是图片的默认属性，所以赋值的时候不用style；
Return false 阻止超链接默认跳转<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">body {font-family: "Helvetica", "Arial", serif;color: #333;background-color: #ccc;margin: 1em 10%;}h1 {color: #333;background-color: transparent;}a {color: #c60;background-color: transparent;font-weight: bold;text-decoration: none;}ul {padding: 0;}li {float: left;padding: 1em;list-style: none;}#imagegallery {list-style: none;}#imagegallery li {margin: 0px 20px 20px 0px;padding: 0px;display: inline;}#imagegallery li a img {border: 0;}</style>
</head>
<body><h2>美女画廊
</h2><ul id="imagegallery"><li><a href="../../images/1.jpg" title="美女A"><img src="../../images/1-small.jpg" width="100" alt="美女1"/></a></li><li><a href="../../images/2.jpg" title="美女B"><img src="../../images/2-small.jpg" width="100" alt="美女2"/></a></li><li><a href="../../images/3.jpg" title="美女C"><img src="../../images/3-small.jpg" width="100" alt="美女3"/></a></li><li><a href="../../images/4.jpg" title="美女D"><img src="../../images/4-small.jpg" width="100" alt="美女4"/></a></li>
</ul><div style="clear:both"></div>
<!--显示大图的-->
<img id="image" src="../../images/placeholder.png" alt="" width="450"/><p id="des">选择一个图片</p>
<script src="../../common.js"></script>
<script>var a = my$("imagegallery").getElementsByTagName("a");for (var i = 0; i < a.length; i++) {a[i].onclick = function () {my$("image").src = this.href; //这里是image的默认属性，所以不用stylemy$("des").innerHTML = this.title;return false;}}</script></body>
</html>
3：列表各行变色
用的原理是先获取所有的列表，然后for循环 简单点三木运算，复杂点if判断
// list[i].style.backgroundColor = i%2==0?"pink":"yellow";4：通过name获取元素的值(多使用与表单中)
var inputObjs = document.getElementsByName("name1");
5:模拟搜索框：主要还是value是默认值，所以不用style
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><style>input {color: gray;}</style>
</head>
<body>
<input type="text" value="请输入搜索内容" id="txt"/>
<script src="../../common.js"></script>
<script>my$("txt").onfocus = function () {if (this.value == "请输入搜索内容") {this.value = "";this.style.color = "black";}}my$("txt").onblur = function () {
// if (this.value == "") {
// this.value = "请输入搜索内容";
// this.style.color = "gray";
// } 判断数字比判段字符串快if (this.value.length == 0) {this.value = "请输入搜索内容";this.style.color = "gray";}}</script>
</body>
</html>6：封装innerText和textContent -----重点，都是设置标签中文本内容
InnerText：谷歌，火狐支持，ie8不支持
TextContent：谷歌，ie8支持，火狐不支持
注意的是封装完方法以后，该怎么调用
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>#dv{width: 200px;height: 200px;border: 1px solid #000;;}</style>
</head>
<body>
<input type="button" value="点我" id="bt"/>
<div id="dv">哈哈哈哈哈哈哈哈</div>
<script src="../../common.js"></script>
<script>
//设置标签中的文本内容,使用innerText属性，谷歌，火狐，ie8都支持
// innerContent属性，谷歌，火狐支持，ie8不支持
// 兼容代码
// 设置任意的标签中的文本内容
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$("bt").onclick =function(){console.log(getInnerText(my$("dv")))setInnerText(my$("dv"),"安抚")}
</script>
</body>
</html>7：自定义属性
setAttribute(name,value) getAttribute(name);
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body>
<!--<input type="button" value="点我" id="bt"/>-->
<ul><li>打击假货</li><li>打击假货</li><li>打击假货</li><li>打击假货</li><li>打击假货</li>
</ul>
<script src="../../common.js"></script>
<script>var list = document.getElementsByTagName("li");for (var i = 0; i < list.length; i++) {list[i].setAttribute("score", (i + 1) * 10);list[i].onclick = function () {console.log("哈哈");alert(this.getAttribute("score"));}}// 移除自定义属性// list[i].removeAttribute()// list[i].className =""
</script>
</body>
</html>8:table切换
关键是怎么将上面的索引和下面的索引一一对应，并且点击上面的，下面也会切换。排他效果
在循环的时候，就将索引存储起来。然后在需要的时候读取
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}ul {list-style-type: none;}.box {width: 400px;height: 300px;border: 1px solid #ccc;margin: 100px auto;overflow: hidden;}.hd {height: 45px;}.hd span {display: inline-block;width: 90px;background-color: pink;line-height: 45px;text-align: center;cursor: pointer;}.hd span.current {background-color: purple;}.bd li {height: 255px;background-color: purple;display: none;}.bd li.current {display: block;}</style></head>
<body>
<div class="box" id="box"><div class="hd"><span class="current">体育</span><span>娱乐</span><span>新闻</span><span>综合</span></div><div class="bd"><ul><li class="current">我是体育模块</li><li>我是娱乐模块</li><li>我是新闻模块</li><li>我是综 合模块</li></ul></div>
</div>
<script src="../../common.js"></script>
<script>// 先把该获取的获取了var dv = my$("box");var hd = dv.children[0];var spanObj = hd.getElementsByTagName("span");var bd = dv.children[1];var list = bd.getElementsByTagName("li");for (var i = 0; i < spanObj.length; i++) {
// 存储索引值var num = spanObj[i].setAttribute("index", i);spanObj[i].onclick = function () {for (var j = 0; j < spanObj.length; j++) {spanObj[j].className = "";}this.className = "current";var num = this.getAttribute("index");for (var k = 0; k < list.length; k++) {list[k].className = "";}list[num].className = "current";}}</script><!--// //获取最外面的div-->
<!--// var dv = my$("box");-->
<!--// var bd = dv.children[1];-->
<!--// // 获取所有的li-->
<!--// var list = bd.getElementsByTagName("li");-->
<!--// console.log(list);-->
<!--// // 获取hd ,排他功能-->
<!--// var span = document.getElementsByTagName("span");-->
<!--// for (var i = 0; i < span.length; i++) {-->
<!-- 在点击之前就把索引保存在span标签里面-->
<!--// span[i].setAttribute("index", i);-->
<!--// span[i].onclick = function () {-->
<!-- 点击的时候，先清除所有有原来的样式，-->
<!--// for (var j = 0; j < span.length; j++) {-->
<!--// span[j].className = "";-->
<!--//-->
<!--// }-->
<!--// this.className = "current";-->
<!-- span被点击的时候获取存储的索引的值-->
<!--// var num = this.getAttribute("index");-->
<!-- 获取所有的li标签，先把所有的li标签隐藏-->
<!--// for (var k = 0; k < list.length; k++) {-->
<!--// list[k].className = "";-->
<!--// }-->
<!--// list[num].className = "current";-->
<!--// }-->
<!--// }--></body>
</html>
版权声明：本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间：8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态
