webAPI2

最新推荐文章于 2024-09-05 09:01:57 发布

原创最新推荐文章于 2024-09-05 09:01:57 发布 · 492 阅读

CC 4.0 BY-SA版权

//1.点击切换图片
<a href="images/1.jpg" id="aa">
<img src="images/1-small.jpg" alt="" id="im">
</a>
<script>
//需求: 点击图片标签. 设置图片标签src的路径为超链接中的路径, 不跳转
var imgObj = document.getElementById("im");
imgObj.onclick = function () {
var aObj = document.getElementById("aa");
this.src = aObj.href;

//阻止跳转事件
return false;
}
</script>
//2.表单的属性操作
<input type="button" value="修改性别" id="btn">
<input type="radio" name="sex"> 男
<input type="radio" name="sex" id="women"> 女
<input type="radio" name="sex"> 保密

//需求: 点击按钮选中性别: 女
my$("btn").onclick = function () {
my$("women").checked = true;
}
// 在表单标签中, 如果属性和值一样, 那么操作DOM的时候, 这个属性值是布尔类型
</script>
//3.点击按钮选择类型
<input type="button" value="点菜" id="btn" disabled="disabled">
<select name="" id="ss">
<option value="">红烧肉</option>
<option value="">炸鸡腿</option>
<option value="" id="op">毒鸡汤</option>
<option value="">心灵鸡汤</option>
<option value="">乌鸡汤</option>
</select>
<input type="text" value="哈哈哈哈" readonly="readonly">
<script src="common.js"></script>
<script>
// 需求: 点击按钮选中毒鸡汤
my$("btn").onclick = function () {
my$("op").selected = true;
}

//属性名和属性值一样的有: checked selected readonly只读 disabled 禁用

</script>
//4.点击按钮修改div的样式
<input type="button" value="修改样式" id="btn">
<div id="dv">111</div>

//点击按钮, 修改div的宽,高, 背景颜色
my$("btn").onclick = function () {
my$("dv").style.width = "200px";
my$("dv").style.height = "200px";
my$("dv").style.backgroundColor = "pink";
my$("dv").style.fontSize = "30px";
}
//凡是css中属性是多个单词的写法, 在js中用驼峰命名法

</script>

//5.点击按钮显示和隐藏
<style>
#dv{
width: 200px;
height: 200px;
background-color: pink;
}
.none{
display: none;
}
</style>
</head>
<body>
<input type="button" value="隐藏" id="btn">
<div id="dv" class="red"></div>
<script src="common.js"></script>
<script>
// my$("btn").onclick = function () {
// //判断当前value值得属性
// if(this.value == "隐藏"){
// my$("dv").style.display = "none";//设置隐藏样式
// this.value = "显示"
// }else if(this.value == "显示"){
// my$("dv").style.display = "block";
// this.value = "隐藏"
// }
// }

//通过类名设置
my$("btn").onclick = function () {
//判断当前value值得属性
if(this.value == "隐藏"){
my$("dv").className = "none";//设置隐藏样式
this.value = "显示"
}else if(this.value == "显示"){
// 空字符串即清除
// 用 className 添加类名会覆盖原有的类名
my$("dv").className = "";
this.value = "隐藏"
}
}
</script>