代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.lul li{
height: 90px;
width: 50px;
}
</style>
</head>
<body>
<button>3</button>
<button>4</button>
<button>5</button>
<div>
<ul style="position: relative">
<li style="background: red"></li>
<li style="background: forestgreen"></li>
<li style="background: yellow"></li>
<li style="background: paleturquoise"></li>
<li style="background: blue"></li>
<li style="background: wheat"></li>
<li style="background: darkturquoise"></li>
<li style="background: rebeccapurple"></li>
<li style="background: orange"></li>
<li style="background: salmon"></li>
</ul>
</div>
<script>
var lli = document.getElementsByClassName('lul')[0].children;
console.log(lli);
var bu3 = document.getElementsByTagName('button')[0];
var bu4 = document.getElementsByTagName('button')[1];
var bu5 = document.getElementsByTagName('button')[2];
bu3.onclick = function () {
jiu(3);
};
bu4.onclick = function () {
jiu(4);
};
bu5.onclick = function () {
jiu(5);
};
function jiu(row) {
//记录格子宽高，传递进来的是每行放几个li
var height = 90,width = 50;
for(var x = 0;x<lli.length;x++){
//记录行与列
var hang,lie;
hang = parseInt(x/row);
lie = x%row;
console.log('第'+x+"个在第"+hang+"行"+lie+"列");
//问题在这，每一个元素都要执行一遍这个赋值，是否可以直接在样式表中添加
/*.lul li{
height: 90px;
width: 50px;
position: absolute;
}
如上
*/
lli[x].style.position='absolute';
lli[x].style.left = lie * width + 'px';
lli[x].style.top = hang * height +'px';
}
}
</script>
</body>
</html>
相关专题
javascript
2022-09-12 10学好javascript是开发必备基础知识,任何开发都离不开javascript.我的站长站为您整理javascript教程,javascript源码,更多javascript资源请访问我的站长站。...
- 植物大战僵尸中文Javascript版源码 [2022-06-29]
- Acrobat Pro+javascript将pdf转换成带页码目录 [2022-06-25]
- 简单JavaScript闯关小游戏源码下载 [2021-12-25]
- JavaScript动态修改样式方法 [2021-10-30]
- JavaScript ES6-11版本语法大全教程 [2021-05-14]
