js 两个方法构建n*n的格子（n从输入框填写），鼠标放上去背景变成红色，移除恢复正常鼠标点击格子背景固定为蓝色，鼠标hover时也不变红，再次点击恢复正常格子大小可用css控制，默认背景色都是

最新推荐文章于 2022-03-03 00:43:10 发布

qq挖掘机

最新推荐文章于 2022-03-03 00:43:10 发布

阅读量244

点赞数

文章标签： js

本文链接：https://blog.csdn.net/xuebinsunwumei/article/details/112800590

版权

本文介绍了两种JavaScript方法来动态生成n*n的网格布局，并实现鼠标悬停时背景变红，点击后背景变为蓝色并阻止hover变色的效果。用户可以通过输入框设置n的值，同时格子大小可通过CSS自定义。默认情况下，格子背景色为常规颜色。

摘要由CSDN通过智能技术生成

方法一：

var num = document.getElementById("num");
var btn = document.getElementById("btn");

btn.onclick = function(){
   
    var n = num.value;

    for(var i = 0;i < n;i++){
   
        for(var j = 0;j < n;j++){
   

            var div = document.createElement("div");
            document.body.appendChild(div);

            div.style.borderWidth = "1px";
            div.style.borderColor = "#000";
            div.style.borderStyle = "solid";
            div.style.width = "80px";
            div.style.height = "80px";
            div.style.display = "inline-block";

            div.flag

最低0.47元/天解锁文章

qq挖掘机

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 两个方法构建n*n的格子（n从输入框填写），鼠标放上去背景变成红色，移除恢复正常鼠标点击格子背景固定为蓝色，鼠标hover时也不变红，再次点击恢复正常格子大小可用css控制，默认背景色都是

var num = document.getElementById("num");var btn = document.getElementById("btn");btn.onclick = function(){ var n = num.value; for(var i = 0;i < n;i++){ for(var j = 0;j < n;j++){ var div = document.createElement("div"
复制链接

扫一扫

js 两个方法构建n*n的格子（n从输入框填写），鼠标放上去背景变成红色，移除恢复正常 鼠标点击格子背景固定为蓝色，鼠标hover时也不变红，再次点击恢复正常 格子大小可用css控制，默认背景色都是

js 两个方法构建n*n的格子（n从输入框填写），鼠标放上去背景变成红色，移除恢复正常鼠标点击格子背景固定为蓝色，鼠标hover时也不变红，再次点击恢复正常格子大小可用css控制，默认背景色都是