基础介绍
https://blog.csdn.net/weixin_45525272/article/details/107671639
common.jsfunction my$(id) {
return document.getElementById(id);
}
//设置任意的标签中间的任意文本内容
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;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 100px 20%;
}
h1 {
color: #333;
/*transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。*/
background-color:transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0px;
}
li {
float: left;
padding: 1em;
list-style-type: 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="image/1.jpg" title=“照片1”><img src="image/1.jpg-small.jpg" alt="加载错误" width="100"></a></li>
<li><a href="image/2.jpg" title=“照片2”><img src="image/2.jpg-small.jpg" alt="加载错误" width="100"></a></li>
<li><a href="image/3.jpg" title=“照片3”><img src="image/3.jpg-small.jpg" alt="加载错误" width="100"></a></li>
<li><a href="image/3.jpg" title=“照片4”><img src="image/3.jpg-small.jpg" alt="加载错误" width="100"></a></li>
</ul>
<!--清除同行元素，不允许其bai它元素与之在一行内。-->
<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属性的值给id为des的p标签赋值
// 获取所有a标签
var aObjs=my$("imagegallery").getElementsByTagName("a");
// 循环遍历
for (var i=0;i<aObjs.length;i++){
aObjs[i].οnclick=function (ev) {
my$("image").src=this.href;
//为p标签赋值
my$("des").innerText=this.title;
//阻止超链接默认的跳转
return false;
}
}
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.nodeSmall {
width: 50px;
height: 50px;
background: url(images/bgs.png) no-repeat -159px -51px;
position: fixed;
right: 10px;
top: 10%;
}
.erweima {
position: absolute;
top: 0;
left: -150px;
}
.nodeSmall a {
display: block;
width: 50px;
height: 50px;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="nodeSmall" id="node_small">
<a href="#"></a><!--锚定-->
<div class="erweima hide" id="er">
<img src="images/456.png" alt=""/>
</div>
</div>
<script src="common.js"></script>
<script>
//获取鼠标要进入的a标签
//先获取最外面的div
var aObj=my$("node_small").getElementsByTagName("a")[0];
//为a注册鼠标进入
aObj.onmouseover=function () {
my$("er").className="erweima show";
};
//为a注册鼠标离开
aObj.onmouseout=function () {
my$("er").className="erweima hide";
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></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.length == 0) {
this.value = "请输入搜索内容";
this.style.color = "gray";
}
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$永远的24k纯帅$</title>
</head>
<body>
<!--<input type="text" value="文本框" id="txt"/>-->
<input type="button" value="按钮" id="btn"/>
<p>这是p</p>
<script src="common.js"></script>
<script>
my$("btn").onclick=function () {
console.log(document.getElementsByTagName("p")[0].innerText);
};
// my$("txt").οnblur=function () {
// this.value="哈哈";
// console.log(this.id);
// };
</script>
</body>
</html>
