recursal/MDN huggingface dataset:
window.getComputedStyle
=======================

Résumé
------

La méthode `window.getComputedStyle()` donne la valeur calculée finale de toutes les propriétés CSS sur un élément.

Syntaxe
-------


```js
var style = window.getComputedStyle(element[, pseudoElt]);
```


element

L'`Element` pour lequel vous voulez obtenir une valeur calculée.

pseudoElt Facultatif

Chaîne de caractère spécifiant le pseudo-élément à cibler. Doit être `null` (ou non spécifiée) pour les éléments communs.


**Note :** Avant Gecko 2.0, le paramètre `pseudoElt` était obligatoire. Aucun autre navigateur majeur ne requiert que ce paramètre soit renseigné si il est null. Gecko a été modifié pour se comporter comme les autres navigateurs.

La valeur de retour `style` est un objet `CSSStyleDeclaration`.

Exemple
-------


```js
var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, null);

// Ce qui équivaut à&nbsp;:
// var style = document.defaultView.getComputedStyle(elem1, null);
```



```html
<style>
 #elem-container {
 position: absolute;
 left: 100px;
 top: 200px;
 height: 100px;
 }
</style>

<div id="elem-container">dummy</div>
<div id="output"></div>

<script>
 function getTheStyle() {
 var elem = document.getElementById("elem-container");
 var theCSSprop = window
 .getComputedStyle(elem, null)
 .getPropertyValue("height");
 document.getElementById("output").innerHTML = theCSSprop;
 }
 getTheStyle();
</script>
```



```js
function dumpComputedStyles(elem, prop) {
  var cs = window.getComputedStyle(elem, null);
  if (prop) {
    console.log(prop + " : " + cs.getPropertyValue(prop));
    return;
  }
  var len = cs.length;
  for (var i = 0; i < len; i++) {
    var style = cs[i];
    console.log(style + " : " + cs.getPropertyValue(style));
  }
}
```

Description
-----------

L'objet retourné est du même type que celui de la propriété `style` de l'élément ciblé. Toutefois les deux objets ont des buts distincts. L'objet retourné par la méthode `getComputedStyle` est en lecture seule et peut être utilisée pour inspecter le style de l'élément y compris ceux ajoutés via un élément `<style>` ou une feuille de style externe. L'objet `elt.style` doit quant à lui être utilisé pour mettre à jour une propriété de style sur un élément donné.

Le premier argument doit être un Element, sinon, si par exemple un #text Node est utilisé, une exception sera lancée. Depuis la version 1.9.2 de Gecko, les URLs renvoyées ont désormais des guillemets autour de celles-ci: `url("http://foo.com/bar.jpg")`.

Spécifications
--------------

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-window-getcomputedstyle |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `window.getDefaultComputedStyle`
* `Valeur résolue`
Window: online event
====================

L'événement **`online`** de l'interface `Window` est déclenché lorsque le navigateur a obtenu l'accès au réseau et que la valeur de `Navigator.onLine` passe à `true`.

**Note :** Cet événement ne doit pas être utilisé pour déterminer la disponibilité d'un site Web particulier. Des problèmes de réseau ou des pare-feu peuvent encore empêcher l'accès au site Web.


|  |  |
| --- | --- |
| Bulles | No |
| Annulable | No |
| Interface | `Event` |
| Propriété de gestionnaire d'événements | `ononline` |

Exemples
--------


```js
// addEventListener version
window.addEventListener("online", (event) => {
  console.log("Vous êtes maintenant connecté au réseau.");
});

// ononline version
window.ononline = (event) => {
  console.log("Vous êtes maintenant connecté au réseau.");
};
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # event-online |
| HTML Standard # handler-window-ononline |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `offline`
Window.name
===========

En bref
-------

Récupère ou définit le nom de la fenêtre.

Syntaxe
-------


```js
string = window.name;
window.name = string;
```

Exemple
-------


```js
window.name = "lab\_view";
```

Notes
-----

Les noms de fenêtres sont principalement utilisés pour définir les cibles de liens hypertextes et de formulaires. Les fenêtres n'ont pas besoin d'être nommées.

Les noms de fenêtres ont en outre été utilisés par quelques *frameworks* pour le support des échanges de messages inter-domaines (par exemple SessionVars et dojox.io.windowName de Dojo) comme une alternative plus sécurisée à JSONP. Toutefois, les applications web modernes manipulant des données sensibles devraient utiliser l'API postMessage pour les échanges de messages inter-domaines plutôt que s'appuyer sur `window.name`.

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-name-dev |
Window: languagechange event
============================

L'événement **`languagechange`** est déclenché sur l'objet d'étendue globale lorsque la langue préférée de l'utilisateur change.

|  |  |
| --- | --- |
| Bulles | Non |
| Annulable | Non |
| Interface | `Event` |
| Propriété de gestionnaire d'événements | `onlanguagechange` |

Exemples
--------

Vous pouvez utiliser l'événement `languagechange` dans une méthode `addEventListener` :


```js
window.addEventListener("languagechange", function () {
  console.log("languagechange event detected!");
});
```


Ou utilisez la propriété du gestionnaire d'événements `onlanguagechange` :


```js
window.onlanguagechange = function (event) {
  console.log("languagechange event detected!");
};
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # event-languagechange |
| HTML Standard # handler-window-onlanguagechange |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `navigator.language`
* `navigator.languages`
* `Navigator`
* `Window.onlanguagechange` (en-US)
gamepaddisconnected
===================

L'événement `gamepaddisconnected` est déclenché lorsque le navigateur détecte le fait qu'une manette ait été débranchée.

Informations générales
----------------------

Spécification

Gamepad

Interface
`Event`
Propagation

Non

Annulable

Non

Cible

DefaultView (`<window>`)

Action par défaut

Aucune

Propriétés
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` Lecture seule  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` Lecture seule  | `DOMString` | The type of event. |
| `bubbles` Lecture seule  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Lecture seule  | `Boolean` | Whether the event is cancellable or not. |
| `gamepad` Lecture seule  | `Gamepad` | The single gamepad attribute provides access to the associated gamepad data for this event. |

Evénements liés
---------------

* gamepadconnected (en-US)
Voir aussi
----------

* Utilisation de l'API Gamepad (en-US)
Window.outerHeight
==================

`Window.outerHeight` retourne la hauteur de la fenêtre (du navigateur) en pixels. La hauteur retournée prends en compte la fenêtre du navigateur entier, y compris la barre latérale, window chrome and window resizing borders/handles.

Cette propriété n'a pas de valeur par défaut.

Syntaxe


```js
outWindowHeight = window.outerHeight;
```


La valeur retournée correspond à la hauteur extérieure de la fenêtre.

Notes
-----

Pour changer la taille de la fenêtre, utilisez `window.resizeBy()` et `window.resizeTo()` (en-US).

Pour obtenir la hauteur intérieure de la fenêtre (la hauteur de la page actuelle), utilisez `window.innerHeight`.

### Exemple illustré

La figure suivante montre la différence entre `outerHeight` et `innerHeight`.

![innerHeight vs outerHeight illustration](/fr/docs/Web/API/Window/outerHeight/FirefoxInnerVsOuterHeight2.png)

Spécifications
--------------

| Specification |
| --- |
| CSSOM View Module # dom-window-outerheight |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `window.innerHeight`
* `window.innerWidth`
* `window.outerWidth`
* `window.resizeBy()`
* `window.resizeTo()` (en-US)
Window: message event
=====================

L'événement `message` est déclenché sur un objet `Window` lorsque la fenêtre reçoit un message, par exemple d'un appel a `Window.postMessage()` depuis un autre contexte de navigation.

|  |  |
| --- | --- |
| Bulles | Non |
| Annulable | Non |
| Interface | `MessageEvent` |
| Propriété de gestionnaire d'événements | `onmessage (en-US)` |

Exemples
--------

Supposons qu'un script envoie un message à un contexte de navigation différent, tel qu'un autre `<iframe>`, en utilisant un code comme celui-ci:


```js
const targetFrame = window.top.frames[1];
const targetOrigin = "https://exemple.org";
const windowMessageButton = document.querySelector("#window-message");

windowMessageButton.addEventListener("click", () => {
  targetFrame.postMessage("bonjour", targetOrigin);
});
```


Le récepteur peut écouter le message en utilisant `addEventListener()` avec un code comme celui-ci:


```js
window.addEventListener("message", (event) => {
  console.log(`Message reçu: ${event.data}`);
});
```


Alternativement l'écouteur peut utiliser la propriété du gestionnaire d'événements `onmessage` (en-US):


```js
window.onmessage = (event) => {
  console.log(`Message reçu: ${event.data}`);
};
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # event-message |
| HTML Standard # handler-window-onmessage |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Événements liés: `messageerror`.
* `Window.postMessage()`.
Window.dump()
=============

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La méthode **`Window.dump()`** permet d'afficher des messages sur la sortie standard (`stdout`) du navigateur. Si le navigateur a été démarré depuis un terminal, la sortie produite par `dump()` apparaîtra dans le terminal.

La sortie produite par `dump()` n'est *pas* envoyée vers la console des outils de développement du navigateur. Pour afficher des messages dans la console des outils de développement, il faudra utiliser `console.log()`.

Syntaxe
-------


```js
dump(message);
```

### Paramètres

`message`

Une chaîne de caractères contenant le message à afficher.

### Valeur de retour

Aucune (`undefined`).

Spécifications
--------------

Cette fonctionnalité ne fait partie d'aucune spécification.

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
DOMRectReadOnly.left
====================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété en lecture seule **`left`** de l'interface **`DOMRectReadOnly`** renvoie la valeur de la coordonnée gauche du `DOMRect` (a la même valeur que `x`, ou `x + width` *(x + largeur)* si `width` est négative).

Syntaxe
-------


```js
var recLeft = DOMRect.left;
```

### Valeur

Un double.

Spécifications
--------------

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-left |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `DOMRect`
DOMRectReadOnly.x
=================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété en lecture seule **`x`** de l'interface **`DOMRectReadOnly`** représente la coordonnée x d' l'origine du `DOMRect`.

Syntaxe
-------


```js
var recX = DOMRect.x;
```

### Valeur

Un double.

Spécifications
--------------

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-x |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `DOMRect`
DOMRectReadOnly.y
=================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété en lecture seule **`y`** de l'interface **`DOMRectReadOnly`** représente la coordonnée y de l'origine du `DOMRect`.

Syntaxe
-------


```js
var recY = DOMRect.y;
```

### Valeur

Un double.

Spécifications
--------------

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-y |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `DOMRect`
DOMRectReadOnly()
=================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Le constructeur **`DOMRectReadOnly()`** crée un nouvel objet `DOMRectReadOnly`.

Syntaxe
-------


```js
var myDOMRectReadOnly = new DOMRectReadOnly(x, y, width, height);
```

### Paramètres

x

La coordonnée `x` de l'origine d'un `DOMRectReadOnly`.

y

La coordonnée `y` de l'origine d'un `DOMRectReadOnly`.

width

La largeur d'un `DOMRectReadOnly`.

height

La hauteur d'un `DOMRectReadOnly`.

Exemples
--------

Pour créer un nouveau `DOMPoint`, vous pouvez exécuter une ligne de code comme celle-ci :


```js
myDOMRect = new DOMRectReadOnly(0, 0, 100, 100);
// l'exécution de 'myDOMRect' dans la console devrait alors renvoyer
// DOMRect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 }
```

Spécifications
--------------

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-domrectreadonly |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `DOMPoint`
* `DOMRect`
DOMRectReadOnly.width
=====================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété en lecture seule **`width`** de l'interface **`DOMRectReadOnly`** représente la largeur du `DOMRect`.

Syntaxe
-------


```js
var recWidth = DOMRect.width;
```

### Valeur

Un double.

Spécifications
--------------

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-width |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `DOMRect`
DOMRectReadOnly.top
===================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété en lecture seule **`top`** de l'interface **`DOMRectReadOnly`** renvoie la valeur de la coordonnée haute du `DOMRect.` (A la même valeur que `y`, ou `y + height` *(y + hauteur)* si `height` est négative.)

Syntaxe
-------


```js
var recTop = DOMRect.top;
```

### Valeur

Un double.

Spécifications
--------------

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-top |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `DOMRect`
DOMRectReadOnly.right
=====================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété en lecture seule **`right`** de l'interface **`DOMRectReadOnly`** renvoie la valeur de la coordonnée droite du `DOMRect.` (a la même valeur que `x + width` *(x + largeur)*, ou `x` si `width` est négative).

Syntaxe
-------


```js
var recRight = DOMRect.right;
```

### Valeur

Un double.

Spécifications
--------------

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-right |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `DOMRect`
DOMRectReadOnly.height
======================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété en lecture seule **`height`** de l'interface of the **`DOMRectReadOnly`** représente la hauteur du `DOMRect`.

Syntaxe
-------


```js
var recHeight = DOMRect.height;
```

### Valeur

Un double.

Spécifications
--------------

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-height |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `DOMRect`
DOMRectReadOnly.bottom
======================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété en lecture seule **`bottom`** d'une interface **`DOMRectReadOnly`** renvoie la valeur des coordonnées du pied du `DOMRect` (a la même valeur que `y + height` *(y + hauteur)*, ou `y` si `height` est négative).

Syntaxe
-------


```js
var recBottom = DOMRect.bottom;
```

### Valeur

Un double.

Spécifications
--------------

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-domrectreadonly-bottom |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `DOMRect`
IDBTransaction.objectStoreNames
===============================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété **`objectStoreNames`** de l'interface `IDBTransaction` renvoie la `liste` des noms des magasins d'objets de la `transaction` .

Syntaxe
-------


```js
var maBaseDeDonnees = transactionObj.objectStoreNames;
```

### Valeur de retour

Une liste `DOMStringList` contenant les noms des magasins d'objets liés à la transaction (`IDBTransaction`).

Spécifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbtransaction-objectstorenames① |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Manipuler IndexedDB
* Démarrer des transactions : `IDBDatabase`
* Manipuler des transactions : `IDBTransaction`
* Définir un intervalle de clés : `IDBKeyRange`
* Récupérer des données et les modifier : `IDBObjectStore`
* Manipuler des curseurs : `IDBCursor`
* Exemple de référence pour IndexedDB : To-do Notifications
abort
=====

Le gestionnaire d'arrêt est exécuté lorsqu'une transaction a été interrompue.

Informations générales
----------------------

Spécification

IndexedDB

Interface

Event

Propagation

Oui

Annulable

Non

Cible

IDBTransaction

Action par défaut

Aucune

Propriétés
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` Lecture seule  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` Lecture seule  | `DOMString` | The type of event. |
| `bubbles` Lecture seule  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Lecture seule  | `Boolean` | Whether the event is cancellable or not. |

Voir aussi
----------

* Utilisation d'IndexedDB
complete
========

Le gestionnaire **complete** est exécuté lorsqu'une transaction est complétée avec succès.

Informations générales
----------------------

Spécification

IndexedDB

Interface

Event

Propagation

Non

Annulable

Non

Cible

IDBTransaction

Action par défaut

Aucune

Propriétés
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` Lecture seule  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` Lecture seule  | `DOMString` | The type of event. |
| `bubbles` Lecture seule  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Lecture seule  | `Boolean` | Whether the event is cancellable or not. |

Exemple
-------


```js
var transaction = db.transaction(["customers"], IDBTransaction.versionchange);

transaction.oncomplete = function( event ) {
  ...
}

// qui est équivalent à
transaction.addEventListener("complete", function( event ) {
  ...
});
```

Voir aussi
----------

* Utilisation d'indexedDB