在HTML中調(diào)用JS的變量
槿年如夢
于 2021-03-18 21:10:58 發(fā)布
8593
收藏 9
分類專欄： 前端 文章標(biāo)簽： javascript js html
版權(quán)
華為云開發(fā)者聯(lián)盟
該內(nèi)容已被華為云開發(fā)者聯(lián)盟社區(qū)收錄
加入社區(qū)
前端
專欄收錄該內(nèi)容
2 篇文章0 訂閱
訂閱專欄
在網(wǎng)上查了很多資料，沒一個(gè)符合我的需求，綜合各方，自己嘗試寫了一個(gè)，將就著用吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
}
a:hover {
color: red;
}
li {
list-style: none;
}
</style>
</head>
<body>
<div>
<div>
<ul>
<li><a id="link_1" target="blank">
<span id="link_detail_1"></span></li>
<li><a id="link_2" target="blank">
<span id="link_detail_2"></span></li>
<li><a id="link_3" target="blank">
<span id="link_detail_3"></span></li>
<li><a id="link_4" target="blank">
<span id="link_detail_4"></span></li>
<li><a id="link_5" target="blank">
<span id="link_detail_5"></span></li>
</ul>
</div>
</div>
<script type="text/javascript">
// 鏈接框鏈接的id號
var link_id = ["link_1", "link_2", "link_3", "link_4", "link_5"];
// 鏈接框內(nèi)容id號
var link_detail_id = ["link_detail_1", "link_detail_2", "link_detail_3", "link_detail_4", "link_detail_5"];
// 鏈接網(wǎng)址
var link_url = ['https://www.baidu.com', 'https://www.baidu.com', 'https://www.baidu.com', 'https://www.baidu.com', 'https://www.baidu.com'];
// 鏈接內(nèi)容
var link_url_event = ["test1", "test2", "test3", "test4", "test5"];
for (var i = 0; i <= 5; i++) {
document.getElementById(link_id[i]).href = link_url[i];//非常重要
document.getElementById(link_detail_id[i]).innerHTML = link_url_event[i];//同樣非常重要
}
</script>
</body>
</html>
document.getElementById(link_detail_id[i]).innerHTML = link_url_event[i];
1
這句可以換成
mid=document.getElementById(link_detail_id[i]);
mid.innerHTML=link_url_event[i];
————————————————
聯(lián)系客服
