A medida que los navegadores continúan actualizando y mejorando, los límites entre CSS y JavaScript se están volviendo cada vez más borrosos. Originalmente eran responsables de funciones completamente diferentes, pero al final, todas pertenecen a la tecnología de front-end web y necesitan trabajar estrechamente entre sí. Nuestras páginas web tienen archivos .js y .css, pero esto no significa que CSS y JS sean independientes y no puedan interactuar. ¡Es posible que no conozca estas cinco formas de trabajar junto con JavaScript y CSS de los que desea hablar a continuación!
Use JavaScript para obtener atributos de pseudo-elemento
Todos saben cómo obtener su valor de estilo CSS a través del atributo de estilo de un elemento, pero ¿puede obtener el valor de atributo de un pseudoelemento? Sí, también puede acceder a pseudo-elementos en la página usando JavaScript.
La copia del código es la siguiente:
<span style = "font-size: 18px;"> // Obtener el valor de color de .Element: antes
var color = window.getComputedStyle (
document.queryselector ('. Element'), ': antes'
) .getPropertyValue ('color');
// Obtener el valor de contenido de .Element: antes
var content = window.getComputedStyle (
document.queryselector ('. Element'), ': antes'
) .getPropertyValue ('contenido'); </span>
¿Lo has visto? Si desea crear un sitio web dinámico y elegante, ¡esta es una técnica muy útil!
API de lista de clases
Muchas Biblioteca de herramientas JavaScript tienen AddClass, RemoveClass y TogglecLass. Para ser compatibles con los navegadores antiguos, estas bibliotecas de clases usan métodos para buscar el nombre de clase del elemento, agregar y eliminar esta clase, y luego actualizar el nombre de clase. De hecho, hay una nueva API que proporciona métodos para agregar, eliminar e invertir atributos de clase CSS, llamados clases de clases:
La copia del código es la siguiente:
<span style = "font-size: 18px;"> mydiv.classlist.add ('mycssclass');
MyDiv.ClassList.Remove ('MycssClass');
MyDiv.ClassList.Toggle ('mycssclass');
La mayoría de los navegadores implementan API de lista de clases muy temprano, y finalmente IE10 también la implementó.
Agregar directamente y eliminar reglas de estilo a hojas de estilo
Todos estamos muy familiarizados con el uso de element.style.propertyname para modificar los estilos. En realidad muy simple.
La copia del código es la siguiente:
<span style = "font-size: 18px;"> function addcssrule (hoja, selector, reglas, índice) {
if (sheet.insertule) {
sheet.insertule (selector + "{" + reglas + "}", index);
}
demás {
sheet.addrule (selector, reglas, índice);
}
}
// Úselo!
addcssrule (document.stylesheets [0], "encabezado", "flotar: izquierda");
</span>
Este método generalmente se usa para crear una nueva regla de estilo, pero puede hacerlo si desea modificar una regla existente.
Cargando archivos CSS
La carga perezosa de imágenes, JSON, scripts, etc. es una buena manera de acelerar la pantalla de la página. Podemos usar curl.js y otros cargadores de JavaScript para retrasar la carga de estos recursos externos.
La copia del código es la siguiente:
<span style = "font-size: 18px;"> curl (
[
"espacio de nombres/mywidget",
"CSS! Espacio de nombres/recursos/mywidget.css"
]
función (myWidget) {
// puedes operar en mywidget
// No hay referencia a este archivo CSS aquí porque no es necesario;
// Solo necesitamos que se cargue en la página
}
}); </span>
Cuando se cargan todos los recursos, la función de devolución de llamada se activará y puedo cargarlo en la función de devolución de llamada. ¡Muy útil!
Evento CSS Mouse Pointer
El atributo de eventos de puntero del evento CSS Mouse es muy interesante. ¡Está prohibido de cualquier evento de JavaScript o funciones de devolución de llamada en este elemento!
La copia del código es la siguiente:
<span style = "font-size: 18px;">. discapacitado {Pointer-Events: Ninguno;
Haga clic en este elemento y encontrará que ningún evento será activado por cualquier oyente que haya colocado en este elemento. Una característica mágica, realmente: no necesita verificar si existe una cierta clase CSS para evitar que se active un evento.
Estos son los 5 métodos para interactuar con CSS y JavaScript que quizás aún no haya descubierto. ¿Tienes algún descubrimiento nuevo? ¡Compártelo!