代码示例
<!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动态修改样式方法
常见问题FAQ
- 【点击查看】免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 【点击查看】提示下载完但解压或打开不了?
- 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
- 【点击查看】开通终身至尊下载源码 “不完整” 或 “不能用” 怎么办?
- 非常抱歉,你有权利告诉本站,但是本站有选择处理或者不处理的权力,如无法接受请不要开通本站会员。
- 【点击查看】开通终身会员能下载全站资源码?
- 可以100%下载全站源码资源的,除部分失效资源,失效的可以联系客服尝试恢复。