JavaScriptでボックスを作る方法

JavaScript でボックスを作成する方法

Web 開発では、ボックスは非常に一般的な UI 要素です。ボックスを使用すると、コンテンツを分離し、管理と整理が容易になります。幸いなことに、JavaScript を使用すると、独自のボックスを非常に簡単に作成できます。この記事では、純粋な JavaScript を使用して基本的なボックスを作成する方法と、それをカスタマイズする方法を紹介します。

単純なボックスを作成する

タイトルといくつかのコンテンツを含む非常に基本的なボックスから始めましょう。 HTML と CSS を使用してボックスの外観を作成し、JavaScript を使用してそれをページに動的に追加します。作成する HTML は次のとおりです。

<div id="myBox">
  <h2>这是一个框</h2>
  <p>这里是一些内容。</p>
</div>

これにより、タイトルとコンテンツを含む単純なボックスが作成されます。次に、CSS を使用してボックスにスタイルを追加します。

#myBox {
  border: 1px solid black;
  padding: 10px;
  background-color: #f8f8f8;
  width: 300px;
}

#myBox h2 {
  margin-top: 0;
}

#myBox p {
  margin-bottom: 0;
}

これにより、ボックスに境界線、パディング、背景色、固定幅が追加され、タイトルとの間の空白が最小限に抑えられます。コンテンツ。

これで、JavaScript を使用してページにボックスを追加できます。 document.createElement() 関数を使用して新しい div 要素を作成し、innerHTML を使用してそれに HTML コンテンツを追加します。最後に、appendChild() 関数を使用して、それをページ上の親要素に追加できます。

const parentElement = document.querySelector('#container');
const boxElement = document.createElement('div');
boxElement.innerHTML = `
  <div id="myBox">
    <h2>这是一个框</h2>
    <p>这里是一些内容。</p>
  </div>
`;
parentElement.appendChild(boxElement.firstChild);

これにより、ボックス要素が作成され、それを含むコンテナ要素に追加されます。ページが読み込まれると、タイトルとコンテンツを含むボックスが表示されるはずです。

カスタム ボックス

基本的なボックスを作成したので、JavaScript を使用して、さらに動的なカスタム機能をボックスに追加できます。

たとえば、querySelector() 関数を使用してボックス内のタイトル要素を取得し、innerHTML を使用してタイトル テキストを変更できます。

const titleElement = boxElement.querySelector('h2');
titleElement.innerHTML = '这是一个自定义框';

また、次のようなボタンを追加することもできます。ユーザーはボタンをクリックしてボックスを表示または非表示にします。まず、2 つのボタン要素を作成し、それらにクリック イベント ハンドラーを追加します。次に、CSS を使用してボックスの表示/非表示を制御し、ボックスにボタンを追加します。

const button1 = document.createElement('button');
button1.innerHTML = '显示框';
button1.addEventListener('click', () => {
  boxElement.classList.remove('hidden');
});

const button2 = document.createElement('button');
button2.innerHTML = '隐藏框';
button2.addEventListener('click', () => {
  boxElement.classList.add('hidden');
});

const buttonContainer = document.createElement('div');
buttonContainer.appendChild(button1);
buttonContainer.appendChild(button2);
boxElement.appendChild(buttonContainer);

/* 在CSS中添加以下样式 */
.hidden {
  display: none;
}

これで、ボタンをクリックしてカスタム ボックスを表示または非表示にすることができます。

結論

JavaScript を使用すると、強力なカスタム ボックスを簡単に作成し、さまざまな動的な機能を追加できます。この記事では、ボックスを最初から作成するための基礎を提供しますが、CSS や JavaScript のテクニックをさらに使用して、より複雑なボックスやカスタム機能を作成することもできます。この簡単な例が、独自のボックスの作成を開始するのに役立つことを願っています。

以上がJavaScriptでボックスを作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。