javaScript在html-摘录(1-CSDN博客

文章目录

前序
操作js

前序

想要造一个单机的说明文档，必须从html开始，前面已经了解一些html的内容，不够，追寻CSS，仍然不理想。现在是js内容。
最终目的：不知道有多少最终目的，首先要把代码框内的保留字颜色给做出来。不知道有机会没有。

操作js

链接单独的js

新建文档，重命名前后缀hand.js放在自己的html文件目录下的item文件夹里。
自己的html文件中 <head 代码段里添加：

<head>
<script type="text/javascript" src="item/hand.js"></script>
</head>

src是指定路径。
下面是主体：

<body>
<pre>
sdkljfsdf
	lskdjf
    	kldfj
    lsk
ldksfj
</pre>
<input type="button" onclick="getValue()" value="test properliy" />
</body>

两部分：
pre代码段。
input编辑框型按钮。（用按钮调用hand.js里的功能）

读取html内容

开始在hand.js里调试代码。

function getValue(){
	var getp=document.getElementsByTagName("pre")
	var len=getp.length
	for(var i=0;i<len;i++){
		document.write(getp[i].innerHTML+"<br />")
		//getp[0].innerHTML=" "
	}
}

getElementsByTagName()—指定标签
另两种形态是，指定id和指定名称，这里用不到。
getElementsByTagName(“pre”)虽然能获得pre的内容，但无法直接被document.write()读出来，必须加innerHTML才能显示。
注释起来的是用于改变指定元素的。

弹出图片盒子

由html、css和js三部分组成。
html部分：

<img src="item/head.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">

<div id="myModal" class="modal">
    <!--close cursor关闭盒子用-->
  <span class="close cursor" onclick="closeModal()">&times;</span>
            <!--modal-content控制盒子内图片的大小-->
    <div class="modal-content">
      <img src="item/head.jpg" style="width:100%">
</div></div>

第一行：页内显示的图片
第二行：div盒子，调用css设置
第三行：<span作用是关闭盒子
第四行：设置盒子样式
.
css部分：

/* 弹窗背景 */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}
 
/* 弹窗内容 */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}
 
/* 关闭按钮 */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

/*指向图片，图片显阴影*/
.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
/*指向图片，鼠标指针改变*/
.cursor {
  cursor: pointer
}

js部分：

/*打开关闭图片box*/
function openModal() {
  document.getElementById('myModal').style.display = "block";
}
function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

myModal的id风格，另一种表述：

function closeModal() {
  document.getElementById('myModal').style.height = "0%";
}

打开时为"100%"