1.点击图片改变图片和文字
<div id="dv1"> <P>你是谁</P> <P>你是谁</P> <P>你是谁</P> <P>你是谁</P> <P>你是谁</P> <P>你是谁</P> <P>你是谁</P> </div> <div id="dv2"> <P>我是谁</P> <P>我是谁</P> <P>我是谁</P> <P>我是谁</P> <P>我是谁</P> <P>我是谁</P> <P>我是谁</P> </div> <img src="images/1.jpg" alt="" title="我也不知道" id="img" width="300"/> <a href = "http://www.baidu.com" id="ak" TARGET="_blank">这是百度</a>
<script> var ButObj = document.getElementById("img"); ButObj.onclick = function () { var aObj = document.getElementById("ak"); var pObj = document.getElementById("dv2").getElementsByTagName("p"); for(var i = 0; i<pObj.length; i ++){ pObj[i].innerText="我也不知道我是谁"; } aObj.href = "http://www.bilibili.com"; aObj.innerText = "这是B站"; this.src = "images/2.jpg"; this.title = "我知道了"; }; </script>
点击前:
点击后:
2.点击按钮修改所有文本框内容
<input type="button" value="修改文本框内容" id="btn"/> <br/> <input type="text" value="The violent delights must has violent ends" /> <input type="text" value="The violent delights must has violent ends" /> <input type="text" value="The violent delights must has violent ends" /> <input type="text" value="The violent delights must has violent ends" /> <input type="text" value="The violent delights must has violent ends" /> <input type="text" value="The violent delights must has violent ends" />
<script> function my$(id) { return document.getElementById(id); } var ButObj = my$("btn"); ButObj.onclick = function () { var TexObj = document.getElementsByTagName("input"); for (var i = 0; i < TexObj.length; i++) { if (TexObj[i].type != "button") { TexObj[i].value = "The game of throne"; } } }; </script>
点击前:
点击后:
3.按钮的排他功能
<!--点击一个按钮 再点其他按钮会复原--> <!--原理:每次点击之前都实行一次将所有按钮都归为“没怀孕”的操作,然后再将被点击到的那一个按钮改为已被点击的样子-->
<input type="button" value="没怀孕" name="测试" /> <input type="button" value="没怀孕" name="测试" /> <input type="button" value="没怀孕" name="测试" /> <input type="button" value="没怀孕" name="测试" /> <input type="button" value="没怀孕" name="测试" /> <input type="button" value="没怀孕" name="测试" />
<script> var ButObj = document.getElementsByTagName("input"); for (var i = 0; i < ButObj.length; i++) { ButObj[i].onclick = function () { for (var j = 0; j < ButObj.length; j++) { //在这将所有的按钮复原为没怀孕 ButObj[j].value = "没怀孕"; } //在这里将被点中的那个按钮设为怀孕了 this.value = "怀孕了"; } } </script>
点击前:
点击后:
4.点击按钮自动选择性别/兴趣
<input type="button" value="填充性别" id="btn1"/> <input type="radio" value="男" name="sex" id="sex1"/>男 <input type="radio" value="女" name="sex" checked="checked"/>女 <input type="radio" value="保密" name="sex"/>保密 <br/> <input type="button" value="填充兴趣" id="btn2"/> <input type="checkbox" value="1" name="habit" id="hab1" checked="checked"/>吃饭 <input type="checkbox" value="1" name="habit"/>睡觉 <input type="checkbox" value="1" name="habit" id="hab2"/>打豆豆
<script> function my$(id) { return document.getElementById(id); } var SexBut = my$("btn1"); SexBut.onclick = function () { var sex = document.getElementsByTagName("input"); for (var i = 0; i < sex.length; i++) { if (sex[i].type == "radio") { var sex1 = my$("sex1"); sex1.checked = true; } } }; var HabBut = my$("btn2"); HabBut.onclick = function () { var sex1 = document.getElementsByTagName("input"); for (var j = 0; j < sex1.length; j++) { if (sex1[j].type == "checkbox") { var hab1 = my$("hab1"); var hab2 = my$("hab2"); hab1.checked = true; hab2.checked = true; } } } </script>
点击前:
点击后:
5.选择下拉框和文本域的相关属性设置
<input type="button" value="点菜" id="btn"/> <select name=" " id="ss"> <option value="1">凉拌黄瓜</option> <option value="2">清蒸鲈鱼</option> <option value="3">白灼娃娃菜</option> <option value="4" id="op1">番茄炒鸡蛋</option> </select> <input type="button" value="用innertext改变文字" id="btn2"/> <input type="button" value="用value改变文字" id="btn3"/> <textarea cols="30" rows="20" id="text"> 1.水电费是按什么价算的 2.快递的寄送去哪里 3.用的是wifi还是网线 4.平时晾衣服的地方在哪里 5.平时的作息习惯是怎么样的 6.冰箱是公用的吗 </textarea>
<script> var ButObj = my$("btn"); ButObj.onclick = function () { var optObj = my$("op1"); optObj.selected = true; }; var ButObj2 = my$("btn2"); ButObj2.onclick = function () { var textObj = my$("text"); textObj.innerText = "嘿嘿,我是用innerText改变文字的,在Element中可以看到变化哟"; }; var ButObj3 = my$("btn3"); ButObj3.onclick = function () { var textObj = my$("text"); textObj.value = "哼,我是用value改变文字的,在Element中可看不到变化!"; }; </script>
点击前:
点击后:
6.点击按钮设置div的格式
<style> .cls { display: none; } div { width: 300px; height: 300px; background-color: red; } .light { background-color: black; } </style>
<input type="button" value="点击我修改div的样式" id="btn"/> <div id="dv"> </div>
<!--(1)普通写法:--> <script> var dvObj = my$("dv"); var buObj = my$("btn"); buObj.onclick = function () { dvObj.style.width = "300px"; dvObj.style.height = "300px"; dvObj.style.backgroundColor = "pink"; } </script>
<!--(2)class(类样式)写法 :--> <!--已经在<style></style>中说明了格式--> <input type="button" value="点击我用class修改样式" id="btn1"/> <div id="dv2"> </div> <script> var ButObj = my$("btn1"); var divObj = my$("dv2"); ButObj.onclick = function () { divObj.className = "cls"; } </script>
点击前:
点击后: