//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>
<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 按tab-->
<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>