——Dieser Artikel beginnt——
1. Manipulieren Sie den Stil der Elemente
1. Legen Sie den Inline-Stil des Elements fest
Syntax: element.style.style name = style value, legt den Inline-Stil für das Element fest
Hinweis: Stilnamen mit Unterstrichen müssen in Camel-Case- oder Array-Assoziationssyntax geschrieben werden.
2. Rufen Sie den Inline-Stil des Elements ab
Syntax: element.style.style-Name
Holen Sie sich: den Wert des angegebenen Stils des Elements
Hinweis: Es kann nur der Wert des Inline-Stils abgerufen werden. Der Wert des Nicht-Inline-Stils kann nicht abgerufen werden. Der Stilname hat einen Unterstrich und muss in Camel-Case- oder Array-Assoziationssyntax geschrieben werden.
3. Rufen Sie den Nicht-Inline-Stil des Elements ab
Standardbrowser:
Syntax: window.getComputedStyle (zu erhaltendes Element).Stilname
Gibt zurück: der Wert, der dem angegebenen Stil des Elements entspricht
Hinweis: Stilnamen mit Unterstrichen müssen in Camel-Case- oder Array-Assoziationssyntax geschrieben werden. Stilwerte können sowohl inline als auch nicht inline abgerufen werden, sie können jedoch nur unter Standardbrowsern verwendet werden.
IE niedrigere Version:
Syntax: element.currentStyle.style-Name
Holen Sie sich: den Wert, der dem angegebenen Stil des Elements entspricht
Hinweis: Der Stilname mit Unterstrich muss in Camel-Case- oder Array-Assoziationssyntax geschrieben werden. Der Stilwert kann sowohl inline als auch nicht inline abgerufen werden, kann jedoch nur in IE-Browsern mit niedrigeren Versionen verwendet werden.
4.Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 100px;
}
</style>
</head>
<body>
<div style="width:100px">你好世界</div>
<script>
//1.设置元素的行内样式
var box = document.getElementsByTagName('div')[0]
console.log (box);
box.style.color = 'skyblue'
//2.获取元素的行内样式
console.log (box.style.width);
console.log (box.style.height); //用的非行内式
//3.获取元素非行内样式
//标准浏览器
var res = window.getComputedStyle(box).height
console.log (res);
</script>
</body>
</html>Ergebnis:
2. Bearbeiten Sie die Namen der Elementklassen
1.Klassenname
Tatsächlich dient es dazu, das native Attribut des Elements zu bedienen, aber class ist ein Schlüsselwort in js, daher wird das native Attribut, das wir bedienen, in className umbenannt.
Lesen:
Syntax: element.className
Holen Sie sich: Den vollständigen Klassennamen des Elements, bei dem es sich um eine Zeichenfolge handelt
Schreiben:
Syntax: element.className = 'Wert'
Funktion: Legen Sie den Namen der Elementklasse und die vollständige Abdeckungseinstellung fest
Zusatz:
Syntax: element.className += 'Wert'
Hinweis: An der Position des Werts muss ein Leerzeichen geschrieben werden
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box box2"></div>
<script>
var div = document.querySelector('div')
console.log (div.className);
div.className = 'zs'
console.log (div);
div.className += ' ls'
console.log (div);
</script>
</body>
</html>Ergebnis:
2.Klassenliste
Jedes Element verfügt über ein Attribut namens classList, eine arrayartige Sammlung, die alle Klassennamen des Elements aufzeichnet.
Fügen Sie einen Klassennamen hinzu:
Syntax: element.classList.add('Klassenname, der hinzugefügt werden soll')
Funktion: Fügen Sie dem Element einen Klassennamen hinzu, es werden jedoch keine Duplikate hinzugefügt.
Löschen Sie einen Klassennamen:
Syntax: element.classList.remove('Zu löschender Klassenname')
Funktion: Löschen Sie einen Klassennamen für das Element
Ändern Sie einen Klassennamen:
Syntax: element.classList.toggle('Zu wechselnder Klassenname')
Funktion: Dieses Element schaltet einen Klassennamen um
Switching: Löschen, falls vorhanden, hinzufügen, falls nicht
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>切换类名</button>
<div class="box box2"></div>
<script>
var div = document.querySelector('div')
var btn = document.querySelector('button')
console.log (div.classList);
div.classList.add('ww')
console.log (div);
div.classList.remove('ls')
console.log (div);
btn.onclick = function(){
div.classList.toggle('ww')
console.log (div);
}
</script>
</body>
</html>Ergebnis:
——Ende dieses Artikels——