So ändern Sie den CSS-Attributwert in js

Methoden zum Ändern von CSS-Attributwerten: 1. Verwenden Sie die Anweisung „document.getElementById(id value).className=string;“ 2. Verwenden Sie „document.getElementById(id value).style.Attribute name=value; " Anweisungsänderung.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

1. Verwenden Sie JS, um den Klassenattributwert des Etiketts zu ändern:

Das Klassenattribut ist eine der Möglichkeiten, auf das Stylesheet auf dem Etikett zu verweisen Wenn das Klassenattribut geändert wird, wird auch das vom Tag referenzierte Stylesheet geändert. Dies ist also die erste Änderungsmethode.

Der Code zum Ändern des Klassenattributs eines Tags lautet:

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

document.getElementById( id ) wird verwendet, um das dem Tag entsprechende DOM-Objekt abzurufen. Sie können es auch mit anderen Methoden abrufen. className ist eine Eigenschaft des DOM-Objekts, die dem Klassenattribut des Labels entspricht. string ist der neue Wert des Klassenattributs, das ein definierter CSS-Selektor sein sollte.

Mit dieser Methode können Sie das CSS-Stylesheet des Etiketts durch ein anderes ersetzen oder den angegebenen Stil auch auf ein Etikett anwenden, auf das keine CSS-Stile angewendet wurden.

Beispiel:

<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. Verwenden Sie JS, um den Stilattributwert des Tags zu ändern:

Das Stilattribut ist auch eine der Möglichkeiten, auf ein Stylesheet auf dem Tag zu verweisen, und sein Wert ist ein CSS-Stil Blatt. Das DOM-Objekt verfügt auch über ein Style-Attribut, aber dieses Attribut selbst ist auch ein Objekt. Die Attribute des Style-Objekts entsprechen eins zu eins. Wenn die Attribute des Style-Objekts geändert werden, ändert sich der CSS-Attributwert Das entsprechende Tag ändert sich ebenfalls, daher ist dies die zweite Änderungsmethode.

Der Code zum Ändern der CSS-Eigenschaften eines Tags lautet:

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

document.getElementById( id ) wird verwendet, um das dem Tag entsprechende DOM-Objekt abzurufen. Sie können es auch mit anderen Methoden abrufen. style ist eine Eigenschaft des DOM-Objekts, das selbst ein Objekt ist. Der Eigenschaftsname ist der Eigenschaftsname des Style-Objekts, das einer bestimmten CSS-Eigenschaft entspricht.

Hinweis: Diese Methode ändert eine einzelne CSS-Eigenschaft. Sie hat keinen Einfluss auf die Werte anderer CSS-Eigenschaften auf dem Etikett.

Beispiel:

<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>

Methode:

document.getElementById("xx").Was sind alle Attribute in style.xxx

. HintergrundHintergrund background-attachmentbackgroundAttachmentbackground-colorbackgroundColorbackground-imagebackgroundImagebackground-position backgroundPositionbackground-repeatbackgroundRepeat ?? AnzeigelistStyleTypelistStyleImagelistStylePositionlistStylefontFamilyfont-sizefont-stylefont-variantfont-weightTextbeschriftungs- und AttributvergleichJavaScript-Syntax (Groß-/Kleinschreibung beachten)letterSpacing ZeilenumbruchverticalAnign 【Empfohlenes Lernen:

Box Tag- und Attributvergleich
CSSSyntax (ohne Berücksichtigung der Groß- und Kleinschreibung)	JavaScript-Syntax (ohne Berücksichtigung der Groß- und Kleinschreibung)
border	border
Rand unten	borderBottom
border-bottom-color	borderBottomColor
border-bottom-style	borderBottomStyle
border-bottom-width	borderBo. ttomWidth
border-color	borderColor
border-left	borderLeft
border-left-color	borderLeftColor
border-left-style	borderLeftStyle
border-left-width.	border LeftWidth
Rand- right	borderRight
border-right-color	borderRightColor
border-right-style	borderRightStyle
border-right-width	borderRightWid th
Border-Stil	borderStyle
border-top	borderTop
border-top-color	borderTopColor
border-top-style	borderTopStyle
border -top-width	borderTopWidth
border-width	borderWidth
clear	clear
float	floatStyle
margin	margin
margin-bot tom	marginBottom
margin-left	marginLeft
margin-right	marginRight
margin-top	marginTop
padding	padding
padding-bottom	paddingBottom
padding-left	paddingLeft -Padding-Right
	Anzeige
	list-style-type
	list-style-image
	list-style-position
	list-style
	Leerraum „whiteSpace“ t
Schriftart -family
fontSize
fontStyle
fontVariant
fontWeight
	CSS-Syntax (Groß- und Kleinschreibung beachten)
	Buchstabenabstand.
Zeilenumbruch
line-height	lineHeight
text-align	textAlign
text -decoration	textDecoration
text-indent.	textIndent
text-justify	textJustify
Text-transform	TextTransform
vertical-Align
javaScript Advanced Tutorial】

Das obige ist der detaillierte Inhalt vonSo ändern Sie den CSS-Attributwert in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!