Afin de faciliter les demandes à l'avenir, j'ai lu certaines informations et résumé les méthodes suivantes. Il n'est limité qu'aux JS indigènes. S'il y a un mauvais endroit, veuillez le signaler! J'espère juste que tout le monde ira bien après l'avoir lu!
1. Vous pouvez lire et écrire le style CSS des éléments de document via l'objet de style de l'objet Dom Node (c'est-à-dire l'objet CSSStyledEclartation).
Par exemple: var elm = document.getElementById ('test');
elm.style.color = 'noir';
2.
Par exemple: elm.setAttribute («style», «couleur: rouge; ligne-hauteur: 30px»);
3. Grâce à la propriété CSSTEXT de l'objet CSSStyleDeClartation, SetProperty (), Supprimez laProperty et d'autres méthodes
comme:
elm.style.csstext = 'Color: Red; Line-Height: 30px'; elm.style.reMoveProperty ('Color'); elm.style.setProperty ('Color', 'Green', 'IMPORTANT'); elm.style.csstext = ''; // efface rapidement toutes les déclarations de cette règleLa partie de la déclaration de style de chaque règle CSS (la partie à l'intérieur des accolades) est un objet CSSStyledEclartation, ses propriétés et méthodes:
propriété:
1.CSSTEXT: TEXT DE DÉCLARATION DE LA STYLE DE LA RÈGLE CONNAIRE. Cette propriété peut être lue et écrite et peut être utilisée pour définir la règle actuelle.
2.Length: Combien de déclarations contiennent la règle actuelle?
3.PARENTRULE: La règle contenant la règle actuelle, la propriété Parentrule de la même interface CSSRULE.
méthode:
1. La méthode getPropertyPriority () renvoie la priorité spécifiée. S'il y en a, c'est "important", sinon c'est une chaîne vide;
2. La méthode GetPropertyValue renvoie la valeur déclarée spécifiée;
3. La méthode d'élément (index) renvoie le nom d'attribut de la position spécifiée et est généralement plus direct à l'aide de la syntaxe [index];
4. La méthode SupporProperty est utilisée pour supprimer une propriété CSS et renvoyer la valeur supprimée;
5.SetProperty La méthode est utilisée pour définir l'attribut CSS spécifié, et il n'y a pas de valeur de retour;
4. Utilisez l'attribut Document.Stylesheets pour renvoyer tous les objets de feuille de style (c'est-à-dire toutes les feuilles de style) sur la page actuelle. Il s'agit d'un objet de tableau de classe en lecture seule, et son élément est un objet CSSSTylesHeet (hérité de l'objet Stylesheet). Les méthodes de propriété de cet objet sont les suivantes:
propriété:
1. Objet de tableau de classe CSSRULES, les éléments sont des objets CSS CSSTYLERULE dans la feuille de style; IE9 est les règles suivantes;
2. L'attribut désactivé est utilisé pour ouvrir ou fermer une feuille de style avec une valeur de vrai ou désactivée;
3. La propriété Ownernode renvoie le nœud Dom où se trouve l'objet de feuille de style, généralement <nk> ou <ystyle>. Pour ces feuilles de style référencées par d'autres styles de style, cette propriété est nul;
4. Étant donné que la commande @Import de CSS permet de charger d'autres feuilles de style dans la feuille de style, la propriété Parestylesheet possède la propriété Parestylesheet, qui renvoie la feuille de style qui comprend la feuille de style actuelle. Si la feuille de style actuelle est une feuille de style de niveau supérieur, la propriété renvoie NULL;
5. L'attribut de type renvoie la valeur de type de l'objet de feuille de style, généralement du texte / CSS;
6. L'attribut de titre renvoie la valeur du titre de l'objet de feuille de style;
7. L'attribut HREF est un attribut en lecture seule, qui renvoie l'adresse de feuille de style de la connexion de l'objet Stylesheet. Pour les nœuds de style intégrés, cette propriété est égale à Null;
8. L'attribut multimédia indique si cette feuille de style est utilisée pour l'écran, l'impression ou les deux sont applicables (tous). Cet attribut est en lecture seule et la valeur par défaut est l'écran;
Méthode: Deleterule () Supprime une règle de la feuille de style, insertrule () insère une nouvelle règle dans la feuille de style, et IE9 est ajoutée () et Removerule ();
comme:
document.stylesheets [0] .insertrule ('# test: hover {couleur: blanc;}', 0); document.stylesheets [0] .Deleterule (0); // Supprimez la première règle dans le document de feuille de style. // Renvoie le sélecteur Document de chaîne. // Renvoie la chaîne de règle, y compris le sélecteur Document.Stylesheets [0] .cssrules [1] .csstext; // Renvoie toutes les chaînes de déclaration de style pour la règle actuelle5. Utilisez la méthode GetCompuledStyle de l'objet Window. Le premier paramètre est l'objet élément, et le deuxième paramètre peut être nul, chaîne vide ou chaîne pseudo-élémentaire. Cette méthode renvoie un objet CSSTyleDeClartation en lecture seule représentant le style de calcul. Il représente les informations de style final appliquées réellement à l'élément spécifié, c'est-à-dire le résultat après la superposition de diverses règles CSS;
Par exemple: var color = window.getCompuledStyle (Elm, ': avant'). Color;
var color = window.getCompuledStyle (Elm, ': avant'). getPropertyValue ('Color');
Ou: var color = window.getcomputedstyle (elm, null) .color;
La différence entre un objet CSSStyledEclartation représentant un style calculé et un objet CSSSTyledEclartation représentant un style en ligne:
1. Les propriétés du style de calcul sont en lecture seule;
2. Calculer la valeur du style est une valeur absolue. Les unités relatives telles que les pourcentages et les points seront toutes converties en valeurs absolues de chaîne suffixées «PX». L'attribut dont la valeur est la couleur sera renvoyé dans le format de "RGB (#, #, #)" ou "rgba (#, #, #, #)";
3. Ne calculez pas les attributs composés, mais uniquement sur la base des attributs les plus élémentaires, tels que ne pas interroger la marge, mais interroger Margintop seul, etc.;
4. La propriété CSSTEXT n'est pas définie dans l'objet de style;
5. Le style de calcul est également trompeur. Lorsque vous l'utilisez, vous devez faire attention à la valeur de retour lors de la question de l'interrogation de certains attributs. Par exemple, interroger la famille de la police;
6. La méthode GetCompuledStyle n'est pas prise en charge ci-dessous IE9. L'objet élément de IE a l'attribut CurrentStyle;
6. Ajouter directement la feuille de style
1. Créez une balise <ystyle> pour ajouter une feuille de style intégrée
var style1 = document.CreateElement ('style'); style1.innerhtml = 'corps {couleur: rouge} #top: hover {background-color: rouge; couleur: blanc;}'; document.head.ApendChild (style1);2. Une autre façon consiste à ajouter une feuille de style externe, c'est-à-dire ajouter un nœud de liaison dans le document et pointer l'attribut HREF à l'URL de la feuille de style externe
var link1 = document.createElement ('link'); link1.setAttribute ('rel', 'stylesheet'); link1.setAttribute ('type', 'text / css'); link1.setAttribute ('href', 'reset-min.css'); document.head.APPEndChild (link1);7. La méthode Window.MatchMedia est utilisée pour vérifier l'instruction MediaQuey de CSS. Les dernières versions de divers navigateurs (y compris IE 10+) prennent en charge cette méthode. Pour les anciens navigateurs qui ne prennent pas en charge cette méthode, vous pouvez utiliser la bibliothèque de fonctions tierces MatchMedia.js;
Voici un exemple de la déclaration MediaQuey:
@Media All et (max-device-width: 700px) {body {background: # ff0;}}La méthode Window.MatchMedia accepte une chaîne d'instructions MediaQuery en tant que paramètre et renvoie un objet MediaQueryList. Cet objet a les deux propriétés suivantes:
Média: Renvoie la chaîne d'instruction de MediaQuery Query.
correspondance: renvoie une valeur booléenne indiquant si l'environnement actuel correspond à l'instruction de requête.
var result = window.matchMedia ('(max-width: 700px)'); if (result.matches) {console.log ('la largeur de page est inférieure ou égale à 700px'); } else {console.log ('la largeur de page est supérieure à 700px'); }L'objet MediaQueryList renvoyé par la méthode Window.MatchMedia a deux méthodes pour écouter pour les événements: la méthode AddListener et la méthode de removeListener. Si le résultat de la requête MediaQuery change, la fonction de rappel spécifiée est appelée;
var mql = window.matchMedia ("(max-width: 700px)"); MQL.AddListener (MQCallback); // Spécifiez la fonction de rappel MQCALLBACK (MQCALLBACK); // Fonction de rappel UNDO MQCALLBACK (MQL) {if (mql.matches) {// width inférieur ou égal à 700 pixels} else {// largeur à 700 pixels}}}Références à cet article:
MDN: https://developer.mozilla.org/zh-cn/docs/web/api
Ruan Yifeng Javascript Référence: http://javascript.ruanyifeng.com/dom/css.html
Guide JavaScript faisant autorité sixième édition
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.