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

のすべての属性は何ですか?#margin-topmarginToppaddingpaddingpadding-bottompaddingBottompadding-leftpaddingLeftpadding- rightpaddingRightpadding-toppaddingTop色と背景とプロパティ照#CSS 语法（不区別大小写）##JavaScript 语法（大小写）backgroundbackgroundAttachment#background-colorbackgroundColorbackground-imagebackgroundImagebackground-positionbackgroundPositionbackground-repeatbackgroundRepeatcolorcolor样式标签とプロパティ照会CSS 语法（区別大小写）JavaScript 语法（区別大小写）displaydisplaylist-style-typelistStyleType list-style-imagelistStyleImagelist-style-positionlistStylePositionlist- stylelistStylewhite-spacewhiteSpace文字样式标签とプロパティ照会CSS 语法（区別大小写）JavaScript 语法（区別大小写）fontfontfont-familyfontFamilyfont-size fontSizefont-stylefontStylefont-variant fontVariantfont-weightfontWeightJavaScript 論法（区別大小写）letter-spacingletterSpacingline-breaklineBreakline-height lineHeighttext-aligntextAligntext-decoration textDecoration#text-justifytextJustifytext-transformtextTransformvertical-align#【推荐学习：

盒子标签とプロパティ照会
CSS语法（大小分けなし）	JavaScript语法（区分大小写）
border	border
border-bottom	borderBottom
border-bottom-color	borderBottomColor
border-bottom-style	borderBottomStyle
border-bottom-width	borderBottomWidth
border-color	borderColor
border-left	borderLeft
border-left-color	borderLeftColor
border-left-style	borderLeftStyle
border-left-width	borderLeftWidth
border-right	borderRight
border-right-color	borderRightColor
border-right-style	borderRightStyle
border-right-width	borderRightWidth
border-スタイル	borderStyle
border-top	borderTop
border-top-color	borderTopColor
border-top-style	borderTopStyle
border-top-width	borderTopWidth
border-width	borderWidth
クリア	クリア
float	floatStyle
margin	margin
margin-bottom	marginBottom
margin-left	marginLeft
margin-right	marginRight
	##background
	background-attachment
文例とプロパティの照会
CSS 論法（区別大小写）
#text-indent	textIndent
	verticalAlign
	javascript高级教程 】

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