Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptで要素のCSSスタイルを変更するにはどうすればよいですか？

JavaScript Cssを変更できます getElementById（）などのメソッドを使用した要素の色、フォントサイズなどのスタイル 、 getElementByClassName（） など

次の例では、要素のフォントスタイルとフォントサイズが getElementById（）を使用して変更されています。 メソッド。

例-1

次の例では、スタイルコマンド " style.fontSize "と"style.fontStyle "、提供されたテキストは「35px」のフォントサイズに変更され、フォントスタイルは「イタリック」に変更されます

<html>
<body>
   <p id="size">JavaScript can change the style of an HTML element.</p>
   <p id="style">JavaScript can change the style of an HTML element.</p>
   <button type="button"
   onclick="document.getElementById('size').style.fontSize='35px'">Size</button>
   <button type="button" onclick="document.getElementById('style')
.style.fontStyle='italic'">Style</button>
</body>
</html>

上記のコードを実行すると、ブラウザに次のコードが表示されます。

JavaScriptで要素のCSSスタイルを変更するにはどうすればよいですか？

上記のボタンをクリックすると、最初のテキストが別のフォントサイズに変更されます 2番目のテキストは別のフォントスタイルに変更されます 出力に示されているように。

出力

JavaScriptで要素のCSSスタイルを変更するにはどうすればよいですか？

例-2

次の例では、スタイルコマンド「style.color」を使用してテキストの色を青に変更しています。

<html>
<body>
   <p id="color">JavaScript can change the color of an HTML element.</p>
   <button type="button" onclick="document.getElementById('color').
   style.color='blue'">Color Me</button>
</body>
</html>

上記のコードを実行すると、ブラウザウィンドウに次のように表示されます。

JavaScriptで要素のCSSスタイルを変更するにはどうすればよいですか？

「colorme」をクリックすると 「ボタンを押すと、提供されたテキストの色が「青」に変更されます。 '出力に示されているように。

出力

JavaScriptで要素のCSSスタイルを変更するにはどうすればよいですか？


  1. CSSでテキストボックスのプレースホルダーの色を変更する方法

    ::placeholder疑似要素を使用して、テキストボックスのプレースホルダーテキストの色を変更できます。 CSS::placeholder疑似要素の構文は次のとおりです- ::placeholder { attribute: /*value*/ } 例 次の例は、CSS::プレースホルダー疑似要素を示しています。 <!DOCTYPE html> <html> <head> <style> input:last-child::placeholder {    color: cornflowerblue; } <

  2. HTMLのリンクの色を変更するにはどうすればよいですか？

    HTMLのリンクの色を変更するには、CSSプロパティcolorを使用します。 style属性とともに使用します。 style属性は、要素のインラインスタイルを指定します。 CSSプロパティcolorでstyle属性を使用して、リンクの色を変更します。 style属性の使用は、グローバルに設定されたスタイルをオーバーライドすることに注意してください。 HTMLのタグまたは外部スタイルシートに設定されているスタイルを上書きします。 例 次のコードを実行してHTMLのリンクの色を変更してみてください <!DOCTYPE html> <html>   &n