ネイティブ JavaScript を使用して CSS プロパティを変更する方法の詳細なコード例

JavaScript を使用して CSS プロパティを変更するには、ネイティブ JavaScript を記述するだけです。

JS を使用してラベルのクラス属性の値を変更します。

クラス属性は、ラベルのスタイル シートを参照する方法の 1 つです。その値は、スタイル シートの値です。 class属性が変更されると、ラベルで参照される値が変更されます。スタイルシートも置き換えられているので、これが最初の変更方法です。

ラベルのクラス属性を変更するコードは次のとおりです:

document.getElementById( id ).className = string;

document.getElementById( id ) を使用して、ラベルに対応する DOM オブジェクトを取得することもできます。他の方法を使用して取得してください。 className は、ラベルのクラス属性に対応する DOM オブジェクトのプロパティです。文字列はクラス属性 の新しい値であり、定義された CSS セレクターである必要があります。

この方法を使用すると、ラベルの CSS スタイル シートを別のスタイル シートに置き換えたり、CSS スタイルが適用されていないラベルに指定したスタイルを適用したりできます。

例:

<style type="text/css"> 
.txt { 
font-size: 30px; font-weight: bold; color: red; 
} 
</style> 
<p id="tt">欢迎光临！</p> 
<p><button onclick="setClass()">更改样式</button></p> 
<script type="text/javascript"> 
function setClass() 
{ 
document.getElementById( "tt" ).className = "txt"; 
} 
</script>

JS を使用してタグの style 属性値を変更します:
style 属性もタグのスタイル シートを参照する方法の 1 つであり、その値は CSS スタイル シートです。 DOM オブジェクトにも style 属性がありますが、この属性自体もオブジェクトです。Style オブジェクトの属性が変更されると、その CSS 属性値は 1 対 1 に対応します。対応するタグも変更されるので、これが2番目の変更方法です。

ラベルの CSS 属性を変更するコードは次のとおりです:

document.getElementById( id ).style.Attribute name = value;
document.getElementById( id ) は、ラベルに対応する DOM オブジェクトを取得するために使用されます。他の取得方法を使用することもできます。 style は DOM オブジェクトのプロパティであり、それ自体がオブジェクトです。プロパティ名は、特定の CSS プロパティに対応する Style オブジェクトのプロパティ名です。

注: このメソッドは 1 つの CSS プロパティを変更しますが、ラベル上の他の CSS プロパティの値には影響しません。

例:

p id="t2">欢迎光临！</p> 
<p><button onclick="setSize()">大小</button> 
<button onclick="setColor()">颜色</button> 
<button onclick="setbgColor()">背景</button> 
<button onclick="setBd()">边框</button> 
</p> 
<script type="text/javascript"> 
function setSize() 
{ 
document.getElementById( "t2" ).style.fontSize = "30px"; 
} 
function setColor() 
{ 
document.getElementById( "t2" ).style.color = "red"; 
} 
function setbgColor() 
{ 
document.getElementById( "t2" ).style.backgroundColor = "blue"; 
} 
function setBd() 
{ 
document.getElementById( "t2" ).style.border = "3px solid #FA8072"; 
} 
</script>

以上がネイティブ JavaScript を使用して CSS プロパティを変更する方法の詳細なコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。