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:
欢迎光临！
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:
欢迎光临！
Methode:
document.getElementById("xx").Was sind alle Attribute in style.xxx
| BoxTag- 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 | Hintergrund
| background-attachment | |
| background-color | |
| backgroundImage | |
| backgroundPosition | |
| backgroundRepeat ?? | Anzeige |
| list-style-type | |
| list-style-image | |
| list-style-position | |
| list-style | |
| Leerraum „whiteSpace“ t | |
| Schriftart -family | |
| fontSize | |
| fontStyle | |
| fontVariant | |
| fontWeight | |
| Textbeschriftungs- und Attributvergleich | |
| 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 | verticalAnign |
| 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!
