Maison > Article > interface Web > JavaScript contrôle les pages Web - Compétences CSS et DOM_javascript

JavaScript contrôle les pages Web - Compétences CSS et DOM_javascript

WBOYoriginal: 2016-05-16 15:08:231330parcourir

Lecture recommandée : Pages Web de contrôles JavaScript - DOM

DOM est une méthode de manipulation HTML conforme aux normes du World Wide Web. Elle peut réaliser plus de fonctions de manipulation que les fonctionnalités innerHTML

Voici le code HTML et le code CSS

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
span.class1{
background-color:#DDDDDD;
}
span.class2{
background-color:#221717;
}
</style>
</head>
<body>
<span id="span1" class="class1">
Start Game
</span>
<span id="span2" class="class2">
Start Game
</span>
</body>
</html>

L'attribut de nœud className permet d'obtenir des changements de style spectaculaires en modifiant toute la classe de style du nœud

DOM donne accès aux classes de style d'élément via l'attribut className des attributs de nœud

alert(document.getElementById(“span1”).className);

Complétez la transformation de l'apparence de l'élément en changeant le nom de la classe de style CSS

document.getElementById(“span1”).className=”class2”;//将span1的样式换成span2的样式

De même, nous pouvons également utiliser les événements onmouseover() et onmouseout() pour contrôler le style des éléments

<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'">

Bien que cet effet soit généralement contrôlé à l'aide de CSS, nous nous concentrons ici uniquement sur l'application de ces outils, et vous pouvez simplement suivre l'analogie

Les classes de style CSS n'ont absolument rien à voir avec les classes Javascript - ce sont des choses complètement différentes

En accédant à l'attribut de style unique du nœud, l'attribut de nœud de style réalise une petite quantité de changements de style

L'attribut Style d'un nœud donne accès à un seul attribut de style

<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'" style=" visibility:hidden">

style="visibility:hidden" indique que l'élément est masqué

Les éléments de la page Web peuvent être affichés ou masqués dynamiquement à l'aide de la fonctionnalité de style de visibilité de l'objet élément (display:none/display:block peut également masquer et afficher des éléments)

DOM peut créer n'importe quel élément HTML à volonté, y compris des paragraphes de texte

document.createElement() est utilisé pour créer une balise HTML, et le paramètre est le nom de la balise

document.createElement("p") crée une balise p

Autre : document.createTextNode() est utilisé pour créer des paragraphes de texte, et le paramètre est le contenu du texte

var pElem=document.createElement("p");//Créer une balise P

pElem.appendChild(document.createTextNode("Hello WeAreZero!"));//Ajouter le texte du sous-élément à la balise P

document.getElementById("span1").appendChild(pElem);//Ajouter la balise P et ses sous-éléments à la balise span1

Annexe :

En utilisant la méthode createElement() de l'objet document, vous pouvez créer n'importe quel élément HTML

Si vous devez ajouter du contenu textuel à un élément, vous devez créer un sous-élément de contenu textuel et l'ajouter à l'élément

En ajoutant et supprimant soigneusement des nœuds dans l'arborescence DOM, les pages Web peuvent être désassemblées et réorganisées à volonté

C'est l'introduction de JavaScript pour contrôler les pages Web-CSS et DOM. J'espère que cela sera utile à tout le monde !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Plug-in de loupe écrit sur la base de jquery_jqueryArticle suivant：Plug-in de loupe écrit sur la base de jquery_jquery

Articles Liés

Voir plus