JS操作標籤
獲取對象
1.根據ID獲取標籤對象：document.getElementById(“ID”)
2.根據class名稱獲取標籤對象集合：document.getElementsByClassName(“ClassName”)
3.根據HTML 標籤名稱獲取標籤對象集合：document.getElementsByTagName(“a”)
第2和第3條要指定到某個元素，要先確認好該元素在集合的位置（從0開始），如下
document.getElementsByClassName(“ClassName”)[0]
document.getElementsByTagName(“a”)[0]
獲取/修改對象樣式
1、getComputedStyle(obj,null)[attr]
參數1：元素對象
參數2：僞類（不是必須的，當不查詢僞類元素的時候可以忽略或者寫 null）
[attr]即爲要獲取的樣式
這種方式讀取的樣式是最終樣式，包括了內聯樣式、嵌入樣式和外部樣式。也就是該標籤在網頁上顯示的樣式
如下：
var obj_ = document.getElementById("ID_")
console.log(getComputedStyle(obj_)["width"])
//測試結果："100px"
2、obj.style
這種方式只能獲取到內聯樣式，也就是<div id=“ID_” style=“width:100px;”>這裏的樣式和屬性
支持獲取樣式也支持修改樣式
因爲是操作的內聯樣式，所以優先級是最高的
如下：
var obj_ = document.getElementById("ID_");
obj_.style.width = "200px";
console.log(obj_.style.width)
//測試結果："200px"
3、obj.getAttribute 和 obj.setAttribute
獲取對象屬性，也就是<div id=“ID_” style=“width:100px;”>這裏的屬性
var obj_ = document.getElementById("ID_");
obj_.setAttribute('style', 'height: 200px');
console.log(obj_.getAttribute("style"))
//測試結果："200px"
練習Demo
提要：html中的內容是按照HTML本身的先後順序加載的。
要注意script引用或者在頁面內寫<script></script>的位置
如果你想操作元素，得在要操作的元素後面寫，不然會遇到取不到對象或者取不到對象內容的問題
如果是寫點擊事件或者其它的事件，如<button onclik=“click_()”></button>這種需要寫函數的
就得在標籤前面寫，不然會有函數未定義的問題
input file 實現拍照上傳和預覽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.cam {
position: relative;
width: 50%;
display: inline-flex;
vertical-align: text-bottom;
justify-content: space-between;
margin-left: 4rem;
}
.camera {
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 30%;
}
.shadeImg {
position: absolute;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 15;
text-align: center;
background: rgba(0, 0, 0, 0.55);
}
.shadeImg:after {
display: inline-block;
content: '';
width: 0;
height: 100%;
vertical-align: middle;
}
.img1 {
display: inline-block;
vertical-align: middle;
line-height: 1.6;
font-size: 16px;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
margin: 0;
padding: 0;
max-width: 100%;
}
</style>
</head>
<body>
<script>
function prewviewImg() {
var file = document.getElementById("fileImage");
if (window.FileReader) {
var reader = new FileReader();
} else {
alert("您的設備不支持圖片預覽功能，如需該功能請升級您的設備！");
}
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var img = document.getElementById("img1");
img.setAttribute("src", e.target.result);
$(".shadeImg").fadeIn(500);
}
reader.readAsDataURL(file.files[0]);
}
}
function closeShadeImg() {
$(".shadeImg").fadeOut(500);
}
</script>
<form class="cam">
<a href="javascript:">上傳
<input id="fileImage" class="camera" type="file" accept="image/*" capture="camera">
</a>
<a href="javascript:" onclick="prewviewImg()">預覽</a>
</form>
<div class="shadeImg" id="shadeImg" onclick="javascript:closeShadeImg()">
<img class="img1" id="img1" />
</div>
</body>
</html>
兩個頁面傳值
傳值：index頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
function click_(data) {
var list_ = data.getElementsByTagName("span");
window.location.href = "data.html?name=" + list_[0].innerText + "&time=" + list_[1].innerText;
}
</script>
<div onclick="click_(this)">
<span>data_1</span>
<span>2020/1/1</span>
</div>
</body>
</html>
接收：data頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<span id="name"></span>
<span id="time"></span>
</div>
</body>
<script>
var url = decodeURI(location.search);
if (url) {
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}
document.getElementById("name").innerHTML = theRequest.name;
document.getElementById("time").innerHTML = theRequest.time;
}
</script>
</html>
-----------------------------------------------------------------我是分割線--------------------------------------------------------------
看完了覺得不錯就點個贊或者評論下吧，感謝！！！
如果本文哪裏有誤隨時可以提出了，收到會盡快更正的