webAPI3

最新推荐文章于 2021-03-10 15:14:03 发布

web html

最新推荐文章于 2021-03-10 15:14:03 发布

阅读量235

点赞数

本文链接：https://blog.csdn.net/weixin_44748332/article/details/90242705

版权

//1添加类名
<style>
.box{
width: 100px;
height: 100px;
background-color: pink;
border:1px solid red;
}

</style>
</head>
<body>
<input type="button" value="修改样式" id="btn">
<div id="dv">111</div>
<script src="common.js"></script>
<script>

//点击按钮, 修改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";

my$("dv").className = "box";
}

</script>
//2美女相册
<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>

<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>
//分析:.点击a标签, 把a标签的href属性的旨给id名为image的src属性, 把a的title的值给p标签

// 从ul中获取所有的a标签的元素
var aObj = my$("imagegallery").getElementsByTagName("a");
console.log(aObj);
for(var i = 0 ; i < aObj.length; i++ ){
aObj[i].onclick = function () {
//alert("11")
// 为 id为image的标签的src赋值
my$("image").src = this.href;
// 为p标签赋值
my$("des").innerText = this.title;
//阻止跳转
return false;
}
}

</script>
//3隔行变色
<input type="button" value="隔行变色" id="btn">
<ul id="uu">
<li>五菱宏光</li>
<li>阿斯顿马丁</li>
<li>法拉利</li>
<li>兰博基尼</li>
<li>AE86</li>
<li>马萨拉蒂</li>
<li>路虎</li>
<li>宝马</li>
<li>野驴</li>
<li>奔奔</li>
<li>红旗</li>
</ul>
<script src="common.js"></script>
<script>
//需求: 点击按钮. 奇红偶黄

my$("btn").onclick = function () {
var list = my$("uu").getElementsByTagName("li");
for(var i = 0 ; i < list.length; i++){
list[i].style.backgroundColor = i%2 == 0 ? "red" : "yellow";
}

}

</script>
//4通过其他的方式来获取元素
<input type="text" name="userName1" class="inpu">
<input type="text" name="userName2" class="inpu">
<input type="text" name="userName">
<input type="text" name="userName" id="myInp">
<script>
//通过name名去获取元素
var inp = document.getElementsByName("userName");
console.log(inp); //返回的是伪数组

//通过类名获取元素
var lei = document.getElementsByClassName("inpu");
console.log(lei);//返回的是伪数组

//通过选择器的方式获取单个元素
console.log(document.querySelector(".inpu"));// 返回的是对象

//通过选择器的方式获取所有的元素
console.log(document.querySelectorAll(".inpu"));//返回的是伪数组

//通过id名获取元素
console.log(document.getElementById("myInp"));// 返回的是对象

//通过标签名获取元素
console.log(document.getElementsByTagName("input"));//返回的是伪数组

</script>

web html

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webAPI3

//1添加类名<style> .box{ width: 100px; height: 100px; background-color: pink; border:1px solid red; } </style></head&...
复制链接

扫一扫