jsでcssの属性値を変更する方法

CSS 属性値を変更する方法: 1. "document.getElementById(id value).className=string;" ステートメントを使用して変更します。 2. "document.getElementById(id value).style.attribute" を使用します。 name =value;」ステートメントの変更。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

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

クラス属性は、ラベル上のスタイル シートを参照する方法の 1 つです。その値がスタイルシートセレクターの場合、class属性の値を変更すると、そのタグが参照するスタイルシートも変更されるため、これが最初の変更方法となります。

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

document.getElementById(id值).className = 字符串;

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

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

例:

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

2. JS を使用してタグの style 属性値を変更します:

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

ラベルの CSS プロパティを変更するコードは次のとおりです:

document.getElementById( id ).style.属性名 = 值;

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

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

例:

<div id="t2">欢迎光临！</div>
<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>

メソッド:

document.getElementById("xx").style.xxx

以上がjsでcssの属性値を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。