CSS對(duì)話框如何動(dòng)態(tài)生成大小

在CSS中，我們可以使用JavaScript來(lái)動(dòng)態(tài)生成大小不同的對(duì)話框，下面是一個(gè)簡(jiǎn)單的示例，展示如何實(shí)現(xiàn)這一功能：

我們需要?jiǎng)?chuàng)建一個(gè)HTML元素來(lái)作為對(duì)話框的容器：

<div id="dialog-container"></div>

我們可以使用CSS來(lái)設(shè)置對(duì)話框的樣式：

#dialog-container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid #000;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

我們將使用JavaScript來(lái)動(dòng)態(tài)生成大小不同的對(duì)話框，我們將創(chuàng)建一個(gè)函數(shù)，該函數(shù)接受兩個(gè)參數(shù)：寬度和高度，然后返回一個(gè)新的對(duì)話框元素：

function createDialog(width, height) {
  var dialog = document.createElement('div');
  dialog.style.position = 'relative';
  dialog.style.width = width + 'px';
  dialog.style.height = height + 'px';
  dialog.style.border = '1px solid #000';
  dialog.style.padding = '10px';
  dialog.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
  return dialog;
}

我們可以調(diào)用這個(gè)函數(shù)來(lái)生成一個(gè)大小為400x300的對(duì)話框：

var dialog = createDialog(400, 300);
document.getElementById('dialog-container').appendChild(dialog);

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為createDialog的JavaScript函數(shù)，該函數(shù)接受寬度和高度參數(shù)，并返回一個(gè)新的對(duì)話框元素，我們調(diào)用這個(gè)函數(shù)來(lái)生成一個(gè)大小為400x300的對(duì)話框，并將其添加到dialog-container元素中。