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:
// 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');
¿Lo has visto? Puedo acceder al valor del atributo de contenido en el pseudoelemento. 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:
mydiv.classlist.add ('mycssclass'); // agrega una clase
mydiv.classlist.remove ('mycssclass'); // Elimina una clase
mydiv.classlist.toggle ('mycssclass'); // alternar una clase
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. Usar JavaScript puede ayudarnos a hacer esto, pero ¿sabe cómo agregar o arreglar una regla de estilo CSS existente? En realidad muy simple.
La copia del código es la siguiente:
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");
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. Pero, ¿sabes que las hojas de estilo CSS también se pueden retrasar la carga, y la función de devolución de llamada será notificada después de que la carga sea exitosa?
La copia del código es la siguiente:
rizo(
[
"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
}
});
El script de resaltación de sintaxis PrismJS utilizado por este sitio web es la carga perezosa. 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 Pointer-Events del evento CSS Mouse Pointer es muy interesante. Su eficacia es muy similar a JavaScript. Cuando establece este atributo a Ninguno, puede evitar que el elemento sea deshabilitado. Puede decir "¿Y qué?", Pero de hecho, ¡prohíbe cualquier evento de JavaScript o funciones de devolución de llamada en este elemento!
La copia del código es la siguiente:
.disable {Pointer-Events: None; }
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.
Lo anterior son 5 formas de interactuar con JavaScript y CSS por mí. Si tiene otros mejores, por favor dígame. Este artículo se actualizará continuamente.