Para facilitar las consultas en el futuro, he leído información y resumí los siguientes métodos. Solo se limita a JS nativo. Si hay algún lugar incorrecto, ¡por favor, señale! ¡Solo espero que todos estén bien después de leerlo!
1. Puede leer y escribir el estilo CSS de los elementos de documentos a través del objeto de estilo del objeto DOM Node (es decir, el objeto CSSStyledEclaration).
Por ejemplo: var elm = document.getElementById ('test');
Elm.style.color = 'Black';
2. Lea y escriba directamente los atributos de estilo a través de getAttribute (), setAttribute () y eliminarTribute () del objeto de elemento
Por ejemplo: Elm.SetAttribute ('estilo', 'Color: Red; Line-Height: 30px');
3. A través de la propiedad Csstext del objeto CSSStyledEclaration, SetProperty (), RemoughProperty y otros métodos
como:
elm.style.csstext = 'color: rojo; line-height: 30px'; elm.style.removeproperty ('color'); elm.style.setproperty ('color', 'verde', 'importante'); elm.style.csstext = ''; // Borrar rápidamente todas las declaraciones de esta reglaLa parte de la declaración de estilo de cada regla CSS (la parte dentro de las aparatos ortopédicas) es un objeto CSSStyledEclaration, sus propiedades y métodos:
propiedad:
1.csstext: todo el texto de declaración de estilo de la regla actual. Esta propiedad se puede leer y escribir y se puede usar para establecer la regla actual.
2. Longitud: ¿Cuántas declaraciones contiene la regla actual?
3.Parentrule: la regla que contiene la regla actual, la propiedad ParentRule de la misma interfaz CSSRULE.
método:
1. El método getPropertyPriority () devuelve la prioridad especificada. Si lo hay, es "importante", de lo contrario es una cadena vacía;
2. El método GetPropertyValue devuelve el valor declarado especificado;
3. El método del ítem (índice) devuelve el nombre del atributo de la posición especificada, y generalmente es más directo utilizando la sintaxis [índice];
4. El método de removeProperty se utiliza para eliminar una propiedad CSS y devolver el valor eliminado;
5.SetProperty se utiliza para establecer el atributo CSS especificado, y no hay valor de retorno;
4. Use el atributo Document.stylesheets para devolver todos los objetos de hojas de estilo (es decir, todas las hojas de estilo) en la página actual. Es un objeto de matriz de clase de solo lectura, y su elemento es un objeto CSSStylesheet (heredado del objeto Stylesheet). Los métodos de propiedad de este objeto son los siguientes:
propiedad:
1. IE9 son las siguientes reglas;
2. El atributo deshabilitado se usa para abrir o cerrar una hoja de estilo con un valor de verdadero o discapacitado;
3. La propiedad de propiedad de propiedad devuelve el nodo DOM donde se encuentra el objeto de hoja de estilo, generalmente <ink> o <style>. Para aquellas hojas de estilo a las referencias por otras hojas de estilo, esta propiedad es nula;
4. Debido a que el comando @import de CSS permite que otras hojas de estilo se carguen en la hoja de estilo, la propiedad ParentStylesheet tiene la propiedad ParentStylesheet, que devuelve la hoja de estilo que incluye la hoja de estilo actual. Si la hoja de estilo actual es una hoja de estilo de nivel superior, la propiedad devuelve nulo;
5. El atributo de tipo Devuelve el valor de tipo del objeto Stylesheet, generalmente Text/CSS;
6. El atributo del título Devuelve el valor del título del objeto Stylesheet;
7. El atributo HREF es un atributo de solo lectura, que devuelve la dirección de hoja de estilo de la conexión del objeto Stylesheet. Para los nodos de estilo integrado, esta propiedad es igual a nula;
8. El atributo de medios indica si esta hoja de estilo se usa para la pantalla, la impresión o ambos son aplicables (todos). Este atributo es de solo lectura y el valor predeterminado es la pantalla;
Método: Deleterule () elimina una regla de la hoja de estilo, InserTrule () inserta una nueva regla en la hoja de estilo, y IE9 se agrega () y removerule ();
como:
document.stylesheets [0] .insertule ('#test: hover {color: white;}', 0); document.stylesheets [0] .deleterule (0); // Eliminar la primera regla en el documento de la hoja de estilo. Hojas de estilos [0] .CSSRULES [1] .selectortext; // devuelve la cadena selectora documento.stylesheets [0] .cssrules [1] .csstext; // Devuelve la cadena de reglas, incluido el documento selector.stylesheets [0] .cssrules [1] .csstext; // devuelve todas las cadenas de declaración de estilo para la regla actual5. Use el método GetComputedStyle del objeto de la ventana. El primer parámetro es el objeto de elemento, y el segundo parámetro puede ser nulo, cadena vacía o cadena de pseudo-elemento. Este método devuelve un objeto CSStyledElation de solo lectura que representa el estilo de cálculo. Representa la información de estilo final aplicada realmente al elemento especificado, es decir, el resultado después de la superposición de varias reglas CSS;
Por ejemplo: var color = window.getComputedStyle (Elm, ': antes'). Color;
var color = window.getComputedStyle (Elm, ': antes'). GetPropertyValue ('color');
O: var color = window.getComputedStyle (Elm, null) .color;
La diferencia entre un objeto CSSStyledEclaration que representa un estilo calculado y un objeto CSSStyledEclaration que representa un estilo en línea:
1. Las propiedades del estilo de cálculo son de solo lectura;
2. Calcule el valor del estilo es un valor absoluto. Las unidades relativas, como los porcentajes y los puntos, se convertirán en valores absolutos de cadena sufijo 'PX'. El atributo cuyo valor es el color se devolverá en el formato de "rgb (#,#,#)" o "rgba (#,#,#,#)";
3. No calcule los atributos compuestos, sino solo en base a los atributos más básicos, como no consultar el margen, sino consultar a Margintop solo, etc.;
4. La propiedad Csstext no se define en el objeto de estilo;
5. El estilo de cálculo también es engañoso. Al usarlo, debe prestar atención al valor de devolución al consultar ciertos atributos. Por ejemplo, consultando la familia de fuentes;
6. El método GetComputedStyle no es compatible con el IE9. El objeto Elemento de IE tiene el atributo CurrentStyle;
6. Agregue la hoja de estilo directamente
1. Cree una etiqueta <Syle> para agregar una hoja de estilo incorporada
var style1 = document.createElement ('estilo'); style1.innerhtml = 'Body {color: rojo} #top: hover {background-color: rojo; color: blanco;}'; document.head.appendChild (style1);2. Otra forma es agregar una hoja de estilo externa, es decir, agregar un nodo de enlace en el documento y apuntar el atributo href a la URL de la hoja de estilo externo
var link1 = document.createElement ('link'); link1.setattribute ('rel', 'stylesheet'); link.setattribute ('type', 'text/css'); link.setAttribute ('href', 'reset-min.css'); document.head.appendChild (link1);7. La ventana. El método Matchmedia se utiliza para verificar la declaración Mediaquery de CSS. Las últimas versiones de varios navegadores (incluidos IE 10+) admiten este método. Para los navegadores antiguos que no admiten este método, puede usar la biblioteca de funciones de terceros MatchMedia.js;
Aquí hay un ejemplo de la declaración Mediaquery:
@Media All y (Max-Device-Width: 700px) {Body {Background: #FF0;}}El método Window.MatchMedia acepta una cadena de instrucción MedoneQuery como parámetro y devuelve un objeto MediaQueryList. Este objeto tiene las siguientes dos propiedades:
Medios: Devuelve la cadena de instrucción de consulta Mediaquery.
COMPORTAS: Devuelve un valor booleano que indica si el entorno actual coincide con la declaración de consulta.
VAR result = Window.MatchMedia ('(max-width: 700px)'); if (resultado.matches) {console.log ('El ancho de la página es menor o igual a 700px'); } else {console.log ('El ancho de la página es mayor que 700px'); }El objeto MediaQuerylist devuelto por la ventana. El método Matchmedia tiene dos métodos para escuchar los eventos: el método AddListener y el método RemoVeListener. Si el resultado de la consulta de Mediaquery cambia, se llama a la función de devolución de llamada especificada;
var mql = window.matchmedia ("(max-width: 700px)"); mql.addlistener (mqCallback); // especificar la función de devolución de llamada mqCallback (mqCallback); // función de la función de devolución de llamada mqcallback (mql) {if (mql.matches) {// ancho menor o igual a 700 píxeles} else {// width más que 700 píxeles}}}Referencias a este artículo:
MDN: https://developer.mozilla.org/zh-cn/docs/web/api
Ruan Yifeng JavaScript Referencia: http://javascript.ruanyifeng.com/dom/css.html
Guía de JavaScript autorizado Sexta Edición
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.