[英]How can I make a box with a constant size in Javascript/CSS?
我正在制作一個基於網格的“繪圖”游戲,它有一個區域(一個盒子)可以繪制。在那個盒子里還有其他你可以繪制的盒子(通過改變它們的背景顏色)。 我的問題是,例如,如果我將大小從 16x16 更改為 32x32,我怎樣才能使主框(繪圖區域)保持不變,以便它不會調整大小(當然,該區域內的方塊應該縮放以適合新繪圖區)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Etch a sketch</title>
</head>
<body>
<div class='main-container'>
<div class="container"></div>
</div>
<script src="script.js"></script>
</body>
</html>
const container = document.querySelector('.container');
const mainContainer = document.querySelector('.main-container');
let size = 16;
mainContainer.style.display = 'grid';
mainContainer.style.gridTemplateColumns = '1fr 1fr 1fr';
container.style.gridColumnStart = '2';
container.style.display = 'grid';
container.style.gridTemplateColumns = 'repeat(' + size + ', 1fr)';
container.style.gridTemplateRows = 'auto';
container.style.gridAutoColumns = '30px';
container.style.gridAutoRows = '30px';
let element;
for(let i = 0; i < size*size; i++) {
let element = document.createElement('div');
element.textContent = '';
element.onmouseenter = function() {
console.log('over');
element.style.background = 'black';
};
element.style.border = '1px solid black';
container.appendChild(element);
}
你需要修正尺寸
container.style.width = '100px'
給你的gridTemplateColumns
一個固定的像素值。
container.style.gridTemplateColumns = 'repeat(' + size + ', 20px)';
https://jsfiddle.net/tLy3147s/
編輯:如果您希望繪圖區域保持相同的大小並具有適合的正方形比例,則需要根據所需的正方形數計算大小。 現在,改變numSquares
一切都應該調整。
const container = document.querySelector('.container');
const mainContainer = document.querySelector('.main-container');
const drawBox = 300;
const numSquares = 16;
let size = drawBox / numSquares;
mainContainer.style.display = 'grid';
mainContainer.style.gridTemplateColumns = '1fr 1fr 1fr';
container.style.gridColumnStart = '2';
container.style.width = drawBox + 'px';
container.style.display = 'grid';
container.style.gridTemplateColumns = 'repeat(' + numSquares + ', auto)';
container.style.gridTemplateRows = 'auto';
container.style.gridAutoColumns = size + 'px';
container.style.gridAutoRows = size + 'px';
let element;
for(let i = 0; i < numSquares*numSquares; i++) {
let element = document.createElement('div');
element.textContent = '';
element.onmouseenter = function() {
console.log('over');
element.style.background = 'black';
};
element.style.border = '1px solid black';
container.appendChild(element);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.